Ограничить количество десятичных знаков на входе Vuejs

Question

У меня есть поле ввода, и я хочу ограничить количество десятичных знаков, которые должен вводить пользователь. Пример: (10.123), если он напечатает больше, никакие изменения не будут внесены, значение останется застрявшим. Прямо сейчас пользователь получает ошибку, но этого недостаточно. PS. Я использую Vue - Bootstrap. Я пытаюсь это , но ограничивает целое число не только десятичными.

<b-form-input
    type="number"
    id="contract-input"
    v-model="contract"
></b-form-input>

На вид это работает нормально.

<p>{{parseFloat(contract).toFixed(2)}}</p>

Answer 1

Вы можете вызвать метод, который ограничит десятичные дроби в вашей переменной для события @input.
Пример:

function callMe(){
    var vm = new Vue({
        el : '#root',
        data : {contract : ''},
        methods: {
          restrictDecimal () {
            this.contract=this.contract.match(/^\d+\.?\d{0,2}/);
          }
        }
    })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  <h3>Restrict decimals in number</h3>
  <div>
    <input type='number' v-model='contract' @input="restrictDecimal">
    
    <b>{{contract}}</b>
    
  </div>
</div>