javascript - Vue.js計算屬性使用set方法後，如何讓該計算屬性的值也跟著更新。

Question

computed: {

cardNum: {
    get: function() {
        return this.ruleForm.cardNum;
    },
    set: function(val) {
        this.ruleForm.cardNum = val.substring(0, 20);
    }
}

}

我將該cardNum綁定給了input的v-model，想以此來實現對該值的過濾（vue.js2.0後不能給v-model的變數綁定過濾器好像），但發現當輸入超過20個字符時，雖然this.ruleForm.cardNum會被截取，但cardNum卻可超過20個字符，請教大神該如何實現該字符長度限制功能呢？

Answer 1

我覺得主要應該是應用場景和思路的問題。

1. 應用場景：一般情況下做表單驗證都是在失去焦點或者當用戶點擊確定保存按鈕的時候才去做的，然後彈出相應的文案提示，隨便找一個什麼度，什麼企鵝的註冊頁面看看。你這樣限制的話交互不夠友好，而且導致你的實現思路偏差。

2. 思路：對於computed和v-model的理解，我不建議它兩這樣用。 v-model本身就是為了實現雙向綁定的，而使用computed就意味著這要多寫一個set方法，同時還要多一個中間值。

如果真要實現，可以試試這樣

<input type="text" v-model="num">

data() {return { num: '' }}
watch: {
    num(a, b) {
        if (a.length > 20) { this.num = b }
    }

}

Answer 2

不知道這樣是否滿足你的需求

<input type="text" maxlength="20">

Answer 3

你這樣做，計算屬性的setter是不會觸發的，除非手動觸發 (vm)this.cardNum = 'what?'
查看文件

或是你可以直接使用vue提供的watcher處理，如下：

watch: {
  'ruleForm.cardNum': function (newValue) {
     // do something...
  }
}

但不建議這樣做