javascript - Vue.js计算属性使用set方法后，如何让该计算属性的值也跟着更新。

问题描述

问 题

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个字符，请教大神应该如何实现该字符长度限制功能呢？

解决方案

我觉得主要应该是应用场景和思路的问题。

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

}

这篇关于javascript - Vue.js计算属性使用set方法后，如何让该计算属性的值也跟着更新。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！