Как переключить класс на компоненты, добавленные динамически через Vue?

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

Что-то вроде этого, возможно?

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

попробуйте это:

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

Answer 3

Лучшее, что я выяснил, было:

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