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

Question

I am trying to set the style of a div with

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

The problem is that these functions get computed for each q, but I also need them to get recomputed when a different variable updates.

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

Here, I need the

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

computed even when ans[id_1] changes.

I have looked at the computed and watch approach, but cannot figure out what will work here.

Answer 1

You can use filtered questions like this:

<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 = ...
        }
    }
},

or computed function:

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

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

Answer 2

I figured out how to work with this.
In place of v-bind:class="{seen:isseen(q),unseen:isunseen(q)}" and subsequently checking ans[id_1]!=2 and ans[id_1]==2 , I instead did v-bind:class="{seen:ans[q]==2,unseen:ans[q]!=2} .

However, Vue cannot detect changes that look like ans[indexOfItem] = newValue [This means the v-bind:class will not be triggered by changes in ans ], so values must instead be set by Vue.set(ans, indexOfItem, newValue) for their effects to be reflected in reactive classes etc.