javascript - Comment mettre à jour la valeur de la propriété calculée en conséquence après avoir utilisé la méthode set d'une propriété calculée de Vue.js?

Question

calculé : {

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

}

J'ai lié le cardNum au v-model de l'entrée et je voulais l'utiliser pour filtrer la valeur (vous ne pouvez pas lier de filtres aux variables du v-model après vue.js2.0), mais j'ai trouvé que lors de l'entrée Lorsqu'il dépasse 20 caractères, bien que this.ruleForm.cardNum soit intercepté, cardNum peut dépasser 20 caractères. Pourriez-vous s'il vous plaît me dire comment implémenter cette fonction de limite de longueur de caractères ?

Answer 1

Je pense que c’est principalement une question de scénarios d’application et d’idées.

1. Scénario d'application : généralement, la vérification du formulaire est effectuée lorsque le focus est perdu ou lorsque l'utilisateur clique sur le bouton OK et enregistrer, puis l'invite de rédaction correspondante apparaît. Recherchez simplement une page d'inscription de n'importe quel diplôme ou Penguin. Si vous le limitez ainsi, l'interaction ne sera pas assez conviviale et cela entraînera des écarts dans vos idées de mise en œuvre.

2. Réflexion : Pour la compréhension de computed和v-model, je ne recommande pas de les utiliser comme ça. Le modèle v lui-même est conçu pour réaliser une liaison bidirectionnelle et utilise des moyens calculés pour écrire une méthode définie supplémentaire et une valeur intermédiaire supplémentaire.

Si vous voulez vraiment y parvenir, vous pouvez essayer ceci

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

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

}

Answer 2

Je ne sais pas si cela répond à vos besoins

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

Answer 3

Si vous faites cela, le setter de la propriété calculée ne sera pas déclenché à moins d'être déclenché manuellement (vm)this.cardNum = 'what?'
Voir la documentation

Ou vous pouvez utiliser directement le watcher fourni par vue, comme suit :

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

Mais ce n'est pas recommandé