javascript - I can't reset vue data after button click? - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow asked May 30, 2018 at 9:39 Jack jdeoelJack jdeoel 4,58466 gold badges2828 silver badges5656 bronze badges 1

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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]*".

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

Share Improve this question Follow asked May 30, 2018 at 9:39 Jack jdeoelJack jdeoel 4,58466 gold badges2828 silver badges5656 bronze badges 1

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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]*".

本文标签： javascriptI can39t reset vue data after button clickStack Overflow