使用方法設置 v-bind:class 不起作用

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無法檢測到類似於ans[indexOfItem] = newValue [這意味着 v-bind:class 不會被ans中的更改觸發] 的更改，因此必須由Vue.set(ans, indexOfItem, newValue)設置值Vue.set(ans, indexOfItem, newValue)以使其效果反映在反應類等中。