假设你有一个模板:
<div v-for="item in items" :key="item.id">
<p @click="toggle(item, $event)"> {{ item.name }} </p>
</div>
此模板中的项来自计算属性
computed: { ...mapGetters(['items']) }
我希望在单击<p>
项时切换类(当然不是在它的兄弟项上)。有没有一种简单的方法可以做到这一点?
有没有一种简单的方法可以将属性添加到计算属性中的单个item
中,然后执行:class="item.prop ? 'myclass' : ''"
?最好不用专门为这件事做调度...
你会使用$event.target
点击元素吗?如果是,你会如何切换这个类?
发布于 2019-03-12 01:48:39
到目前为止,我想出的最好结果是:
data() {
myClasses: {}
},
methods: {
toggle(item) {
if (this.myClasses[item.id]) {
this.$set(this.myClasses, item.id, false)
} else {
this.$set(this.myClasses, item.id, true)
}
}
}
在组件中像这样使用它:
<p @click="toggle(item)" :class="myClasses[item.id] ? 'myclass' : ''">
发布于 2019-03-12 02:58:35
试试这个:
<div v-for="item in items" :key="item.id">
<p @click="item.clicked=!item.clicked"
:class="{'class1':item.clicked, 'class2':!item.clicked}">
{{ item.name }}
</p>
</div>
https://stackoverflow.com/questions/55107245
复制相似问题