如何在 Vue 中通过计算动态添加的组件上切换类？答案

【问题标题】：How to toggle a class on components added dynamically via computed in Vue?如何在 Vue 中通过计算动态添加的组件上切换类？
【发布时间】：2019-03-11 17: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 来点击元素吗？如果是，你会如何切换类？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

Something like this, perhaps?

HTML：

<div id="app">
  <div v-for="item in items" :key="item.id">
    <p @click="toggle($event)"> {{ item.name }}</p>
  </div>
</div>

CSS：

.my-class {
  background-color: yellow;
}

JS：

new Vue({
  el: '#app',
  data: {
    items: [{ name: "Item1", id: "1" }, { name: "Item2", id: "2" }, { name: "Item3", id: "3" }]
  },
    methods: {
    toggle($event){
        let s = $event.target.classList;
      s.contains("my-class") ? s.remove("my-class") : s.add("my-class");
    }
  }
})

【讨论】：

@CesarMartinezDominguez - 如果此答案有助于解决您的问题，您介意将其标记为已接受的答案吗？谢谢！

【解决方案2】：

到目前为止，我认为最好的是：

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' : ''">

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

这在计算属性中没有反应性：/ 这就是为什么我必须在我的解决方案中使用 $set