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.
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) => {
//...
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.