Question

假设您有一个模板：

<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来点击元素吗？如果是的话，您将如何切换类？

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

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

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

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

3 个答案: