[英]Setting v-bind:class with method not working
我正在尝试设置 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
方法,但无法弄清楚这里的工作原理。
您可以使用这样的过滤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) => {
//...
}
}
我想出了如何使用它。
代替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)
以使其效果反映在反应类等中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.