设置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

围绕类名添加单引号。