As we know , input type number allow to enter e . I can reset current input value by reassign vue data , but if there have any e value in input , my reset method is not working !!! I don't know why ?

var app = new Vue({
  el: '#app',
  data: {
    tax: ''
  },
  methods: {
    reset() {
       this.tax = ''
    }
   }
})

<script src=".js"></script>

<div id="app">
  <input v-model="tax" type="number" >
  <button @click="reset">Reset</button>
</div>

As we know , input type number allow to enter e . I can reset current input value by reassign vue data , but if there have any e value in input , my reset method is not working !!! I don't know why ?

var app = new Vue({
  el: '#app',
  data: {
    tax: ''
  },
  methods: {
    reset() {
       this.tax = ''
    }
   }
})

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="tax" type="number" >
  <button @click="reset">Reset</button>
</div>

• javascript
• vue.js

• Not only e but some other special characters like ., - and + Set this.tax = null will reset the input but I don't know why this.tax = '' is not worked – ittus Commented May 30, 2018 at 9:52

4 Answers 4

Change your method

this.tax = ''

to

this.tax = null

var app = new Vue({
  el: '#app',
  data: {
    tax: ''
  },
  methods: {
    reset() {
       this.tax = null
    }
   }
})

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="tax" type="number" >
  <button @click="reset">Reset</button>
</div>

Type number is not updated by setting value to Empty string ''. Instead null would certainly help here.

var app = new Vue({
  el: '#app',
  data() {
    return {
      tax: null
    }
  },
  methods: {
    reset() {
      this.tax = null;
    }
  }
})

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="tax" type="number" ref="inputNum">
  <button @click="reset">Reset</button>
</div>

Or even reset it by changing the element type on the fly, from number to text, and than update the tax prop and set the type back to number

var app = new Vue({
  el: '#app',
  data() {
    return {
      tax: ''
    }
  },
  methods: {
    reset() {
      this.$refs.inputNum.type = "text";
      this.tax = '';
      this.$refs.inputNum.type = "number";
    }
  }
})

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="tax" type="number" ref="inputNum">
  <button @click="reset">Reset</button>
</div>

Maybe i think... input type is Number, so it's not binding.

var app = new Vue({
  el: '#app',
  data: {
    tax: ''
  },
  methods: {
    reset() {
       this.tax = ''
    }
   }
})

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="tax">
  <button @click="reset">Reset</button>
</div>

when we enter 'e', the input will think it means '10^n'.So if you enter 2e3, it means '2*10^3'. Now if you enter the right text contains 'e', the reset button can work as usual. But if you enter the wrong text contains 'e', the browser will change the input's value to ''. I think it's a feature. if you don't want this 'e', you can use Regular Expression or "input type="tel"" or "pattern="[0-9]*".