Tengo una plantilla como esta:

<div id="vue-instance">
  <ul>
    <li v-for="item in inventory" v-on:click="say()" v-bind:class="{active:isActive}" > {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

Y de mi "controladora":

var vm = new Vue({
 el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
   ],
    isActive : false
 },
  methods: {
    say: function () {
      this.isActive = !this.isActive 
    }
 }

});

Con esto, cuando hago clic en un elemento de la lista, todos los elementos se ven afectados por la clase activa. Mi pregunta es cómo alternar un elemento individual.

Gracias.

-2
Rahajason 13 nov. 2017 a las 22:10

2 respuestas

La mejor respuesta

Necesita una bandera activa en cada elemento para poder rastrearlos individualmente.

Por ejemplo:

{name: 'MacBook Air', price: 1000, isActive: false},
{name: 'MacBook Pro', price: 1800, isActive: true}

Luego podrá vincular la clase y hacer clic en evento a item.isActive haciendo algo como esto:

<li v-for="item in inventory" v-on:click="item.isActive = !item.isActive" v-bind:class="{active:item.isActive}" > {{ item.name }} - ${{ item.price }}
</li>
2
Svendberg 13 nov. 2017 a las 19:35

Tenga en cuenta que si el nombre de la clase contiene un guión "-", vue no puede compilar la plantilla. Intenté con la clase con este nombre "contenedor principal" y me enfrento a este problema.

0
atrichkov 20 nov. 2019 a las 08:54