javascript - vue 移动端的input 数字输入优化

Question

这是移动端使用的， input type 为number 时 英文或中文都没有限制，而且maxlength不起作用，input type 为tel 时 英文或中文也都没有限制，但maxlength有作用，所以用tel，keyup 是为了过滤数字以外的字符。请问...

迷茫 · Answer

phoneNumber 初始值应该是字符串的 ''，否则对一个可能为 null 的变量调用 replace 是不安全的。
var self = this 是不必要的。
handleFilterLetters 好长啊，改成 onKeyUp 不好读一点吗（
一行写的太长了，eslint-airbnb 的规则是

怪我咯 · Answer

楼上说的都对
题主还可以多注意一下 code style
比如：
self.phoneNumber=self.phoneNumber.replace(/[^d]/g,'');

写成
self.phoneNumber = self.phoneNumber.replace(/[^d]/g,'');

比较好

仅有的幸福 · Answer

这里用的局部filter

如果想可复用程度高点，全局filter也可以的

var app = new Vue({
  el: "#app",
  data: { phone: "" },

  methods: {
    phoneChange(e) {
      this.phone = e.target.value
      this.$forceUpdate()  // 这里必须有
    }
  },

  filters: {
    'num': function(value) {
      return value.replace(/[^\d]/g, '')
    }
  }
})