vue.js - 如何在 Vue 中通过计算动态添加的组件上切换类？

Question

假设您有一个模板:

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

此模板中的项目来自计算属性:

computed: { ...mapGetters(['items']) }

我想在单击 <p> 时切换类(class)项目(当然不是它的兄弟项目)。有没有简单的方法可以做到这一点？

有没有一种简单的方法可以为该个人添加属性item在计算属性中，然后执行 :class="item.prop ? 'myclass' : ''" ？最好不必为此进行调度...

您是否可以使用 $event.target 来点击该元素？ ，如果是这样，您将如何切换类(class)？

Answer 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");
    }
  }
})