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

     }, 

    } 

但什麼也沒發生，我究竟做錯了什麼？我對VUE仍然很陌生，所以我確信這是一個菜鳥錯誤。

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>