設置V-綁定：使用方法不工作

Question

我想設置一個div的風格

<div v-for="q in questions" v-bind:class="{seen:isseen(q),unseen:isunseen(q)}"> 

問題類是這些功能得到計算每個Q，但我也需要他們在不同的變量更新時重新計算。

 methods:{ 
     isseen: function(id_1){ 
     if(ans[id_1]==2) 
      return true; 
     else 
      return false 
     }, 
     isunseen:function(id_1){ 
     if(ans[id_1]!=2) 
      return true; 
     else 
      return false; 
     } 
    } 

在這裏，我需要

v-bind:class="{seen:isseen(q),unseen:isunseen(q)}" 

計算，即使ans[id_1]變化。

我曾看過computed和watch的方法，但無法弄清楚這裏會起什麼作用。

Answer 1

我想通了如何使用這方面的工作。
代替 v-bind:class="{seen:isseen(q),unseen:isunseen(q)}"並且隨後檢查ans[id_1]!=2和ans[id_1]==2，我改爲 v-bind:class="{seen:ans[q]==2,unseen:ans[q]!=2}。

然而，Vue公司cannot檢測樣子ans[indexOfItem] = newValue變化[這意味着V-綁定：類將不會被改變在ans觸發]，所以值必須改爲由Vue.set(ans, indexOfItem, newValue)被設定在反映他們的影響反應類等

Answer 2

您可以使用過濾questions這樣的：

<div v-for="q in filteredQuestions" :class="{seen:q.isseen,unseen:q.isunseen}"> 

computed: { 
    filteredQuestions(){ 
     for(var i=0, ii=this.questions.length; i<ii; i++) { 
      //this.questions[i].isseen = ... 
      //this.questions[i].isunseen = ... 
     } 
    } 
}, 

或計算功能：

<div v-for="q in questions" v-bind:class="{seen:isseen(q),unseen:isunseen(q)}"> 

methods:{ 
    isseen:() => (id_1) => { 
     //... 
    }, 
    isunseen:() => (id_1) => { 
     //... 
    } 
} 

Answer 3

圍繞類名添加單引號。