点击按钮后无法重置Vue数据？含e的number输入框重置失效问题

我刚踩过一模一样的坑，这就给你拆解清楚原因和解决办法！

问题根源 #

当你在type="number"的输入框里输入'e'时，这个字符是合法的（它属于科学计数法的允许字符），此时Vue的v-model绑定的tax值会变成NaN（不是一个有效的数字）。当你调用reset方法把this.tax设为空字符串''时，Vue会自动尝试把空字符串转换为数字类型，结果依然是NaN——输入框识别到NaN后，并不会清空显示，所以看起来重置失效了。

解决方案 #

把重置的值改成null就可以完美解决！因为null会被number类型输入框正确解析为空状态，代码修改如下：

修改后的JavaScript代码

var app = new Vue({
  el: '#app',
  data: {
    tax: ''
  },
  methods: {
    reset() {
      this.tax = null // 把空字符串替换成null
    }
  }
})

HTML代码保持不变

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <input v-model="tax" type="number" >
  <button @click="reset">Reset</button>
</div>

额外优化方案 #

如果你想从根源上避免这个问题，还可以阻止用户输入'e'这类科学计数法字符，给输入框加一个输入事件监听来过滤非数字内容：

// 输入框添加监听
<input v-model="tax" type="number" @input="filterNonNumber">

// 对应的过滤方法
methods: {
  filterNonNumber(e) {
    // 只保留数字和小数点
    e.target.value = e.target.value.replace(/[^0-9.]/g, '')
  },
  reset() {
    this.tax = ''
  }
}

这样既能避免'e'导致的重置异常，也能让输入框只接收纯数字输入~

内容的提问来源于stack exchange，提问作者Jack jdeoel