Classe n'étant pas ajouté dans VUE

Question

J'ai une entrée déposée et quand il est entré j'ai une méthode qui vérifie la longueur de la chaîne entrée, cela fonctionne bien, mais je veux maintenant ajouter une classe en fonction de la longueur de la chaîne

Ceci est mon élément de modèle:

<input v-model=“categoryTitle” v-bind:class="{ ‘passed’: isPassed }" @keyup=“addName” type=“text” name=“desc” id=“desc” value="" data-original="" placeholder=""> 

ce qui est de mes données et méthodes:

data:{ 
categoryTitle:’’, 
isPassed:false, 
}, 
methods: { 

     addName(){ 

      if(this.categoryTitle.length < 100 && this.categoryTitle.length > 0){ 
       this.isPassed = true; 
      } 

     }, 

    } 

Mais rien ne se passe, ce que je fais mal? Je suis encore assez nouveau à VUE donc je suis sûr que c'est une erreur de débutant.

Answer 1

Assurez-isPassed une propriété calculée:

computed: { 
    isPassed() { 
    let length = this.categoryTitle.length; 
    return length < 100 && length > 0; 
    } 
} 

De cette façon, vous n'avez pas besoin de mettre à jour la propriété en écoutant un événement sur l'entrée. La propriété calculée se met à jour automatiquement lorsque la valeur de la propriété categoryTitle dépendante est modifiée.

Voici un exemple de travail:

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { categoryTitle: '' } 
 
    }, 
 
    computed: { 
 
    isPassed() { 
 
     let length = this.categoryTitle.length; 
 
     return length < 100 && length > 0; 
 
    } 
 
    } 
 
}) 
 

.passed { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script> 
 
<div id="app"> 
 
    <input v-model="categoryTitle" v-bind:class="{ passed: isPassed }"> 
 
</div>