Vue v-bind класс по событию

Question

Я пытаюсь поместить класс в vue, если в массиве присутствует определенный элемент. я пытаюсь таким образом

          <span
          class="wishlist"
          @click="addToWishList(product.id)"
          v-bind:class="{selected : app.user.wishlists.includes(product.id)}">
          <i class="far fa-heart"></i>
        </span>

но это не работает. Как я мог сделать это в vue?

Answer 1

Попробуйте эту логику c, если у вас есть только один выбранный элемент

<span class="wishlist" @click="addToWishList(product.id)"
         :class="{selected : selectedProductId===product.id}">
    <i class="far fa-heart"></i>
</span>

// your data
data:()=>{
  return {
    selectedProductId:null
  }
}

//method
addToWishList:function(id){
  this.selectedProductId = id;
  // rest of your logic
  ...
}

Если у вас есть несколько вариантов выбора

<span class="wishlist" @click="addToWishList(product.id)"
         :class="{selected : selectedProductIds.indexOf(product.id)>-1}">
    <i class="far fa-heart"></i>
</span>

// your data
data:()=>{
  return {
    selectedProductIds : null
  }
}

//method
addToWishList:function(id){
  let index = this.selectedProductIds.indexOf(id);
  // remove if already added
  if(index>-1){
    this.selectedProductIds.splice(index,1);
  }else{
    this.selectedProductIds.push(id);
  }

  // rest of your logic
  ...
}