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

您可以像这样使用过滤的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 2

我想出了如何使用它。
代替 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-bind：类不会被ans中的更改触发因此，值必须由Vue.set(ans, indexOfItem, newValue)设置，以使其效果反映在反应类等中。

设置v-bind：类，方法不起作用

2 个答案: