Limit number of decimals on input Vuejs

Question

I have an input field and I want to limit the number of decimals that a user should type. Ex:(10.123), if he type more, no change will be made, the value will stay stuck. Right now the user gets an error, but is not enough. PS. I am using Vue-Bootstrap. I try this but limits the whole number not just decimals.

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

On view it works fine.

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

Answer 1

You can call a method that would restrict the decimals in your variable on @input event.
Example:

 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>