Restrict typing decimal point in vue js

Question

I am trying to restrict the user to type decimal point as below.

 <b-form-input
          size="sm"
          type="number"
          v-model.number="lots"
          class="inputprice"
          style="width:40%"
          oninput="javascript: if (this.value === '.') return;"
        >{{ lots }}
 </b-form-input>

But this attempt not working. Anyone knows how can I do it inside on input attribute?

what exactly do you want to do? allow only integers? – vsync Nov 01 '20 at 10:19 — vsync, Nov 01 '20 at 10:19
Related answer - https://stackoverflow.com/a/8808608/104380 – vsync Nov 01 '20 at 11:47 — vsync, Nov 01 '20 at 11:47

score 0 · Answer 1 · answered Nov 01 '20 at 10:47

0

You can use parseInt to convert the input value to an integer as follows:

new Vue({
  el:"#app",
  data(){
    return{
      lots:0
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
    type="number"
    v-model.number="lots"
    class="inputprice"
    style="width:40%"
    oninput="this.value = parseInt(this.value);"
  />{{ lots }}
</div>

answered Nov 01 '20 at 10:47

Majed Badawi

27,616
4
25
48

Here also able to type dot right? – Nov 01 '20 at 11:06
@M.Cooper yes but it will directly parse it to an integer – Majed Badawi Nov 01 '20 at 11:14
Thanks. But I need to restrict typing dot – Nov 01 '20 at 11:32
@M.Cooper this does prevent the dot. – Majed Badawi Nov 01 '20 at 11:43

Restrict typing decimal point in vue js

1 Answers1