javascript - Wie kann der Wert der berechneten Eigenschaft nach Verwendung der Set-Methode einer von Vue.js berechneten Eigenschaft entsprechend aktualisiert werden?

Question

berechnet: {

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

}

Ich habe die Kartennummer an das V-Modell der Eingabe gebunden und wollte diese zum Filtern des Werts verwenden (nach vue.js2.0 können Sie keine Filter mehr an die Variablen des V-Modells binden), aber das habe ich bei der Eingabe festgestellt Wenn die Länge 20 Zeichen überschreitet, wird „this.ruleForm.cardNum“ zwar abgefangen, „cardNum“ kann jedoch 20 Zeichen überschreiten. Könnten Sie mir bitte erklären, wie diese Funktion zur Begrenzung der Zeichenlänge implementiert wird?

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

但不建议这样做