如何在通过在Vue中计算动态添加的组件上切换类？
如何在通过在Vue中计算动态添加的组件上切换类？
提问于 2019-03-12 01:24:03
假设你有一个模板：
<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点击元素吗?如果是，你会如何切换这个类？
回答 2
Stack Overflow用户
发布于 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' : ''">
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55107245
复制相关文章
相似问题