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...
  }
}

但不建议这样做