クラスがVUEに追加されていません

Question

入力ファイルがあり、入力時に入力された文字列の長さをチェックするメソッドがありますが、これは問題なく動作しますが、文字列

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

と、これは私のデータおよび方法である：：

これは私のテンプレート要素である

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

     addName(){ 

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

     }, 

    } 

しかし、何が起こっていないですが、私は間違って何をやっていますか？私はまだ非常に新人ですので、それはルーキーのエラーです。

Answer 1

だけisPassed計算されたプロパティます

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

あなたが入力のイベントをリッスンしてプロパティを更新する必要はありませんこの方法。依存するcategoryTitleプロパティの値が変更されると、計算されたプロパティが自動的に更新されます。

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>