javascript - vue 行動端的input 數位輸入最佳化

Question

這是行動端使用的，
input type 為number 時英文或中文都沒有限制，而且maxlength不起作用，
input type 為tel 時英文或中文也都沒有限制，但maxlength有作用，所以用tel，
keyup 是為了過濾數字以外的字元。
請問大神這段程式碼還有沒有優化的空間？

<input v-model="phoneNumber" placeholder="输入手机号" type="tel" maxlength="11" @keyup="handleFilterLetters">

<script type="text/javascript">
    vm = new Vue({
            el: "#app",
            data: {
                phoneNumber: null,
            },
            methods: {
                handleFilterLetters: function(){
                    var self = this;
                    self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
                },
            }
        })
</script>

Answer 1

1. phoneNumber 初始值應該是字串的 ''，否則對一個可能為 null 的變數呼叫 replace 是不安全的。

2. var self = this 是不必要的。

3. handleFilterLetters 好長啊，改成 onKeyUp 不好讀一點嗎（

4. 一行寫的太長了，eslint-airbnb 的規則是

<input
  v-model="phoneNumber"
  placeholder="输入手机号"
  type="tel"
  maxlength="11"
  @keyup="handleFilterLetters"
/>

Answer 2

樓上說的都對
題主還可以多注意一下 code style
例如：
self.phoneNumber=self.phoneNumber.replace(/[^d]/g,'');

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

比較好

Answer 3

這裡用的局部filter

如果想可重複使用程度高點，全域filter也可以的

<p id="app" >
  <input :value="phone | num"  @keyup="phoneChange" />
</p>

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, '')
    }
  }
})