Toggle button text on a loop VUE

Question

I have a loop with products, each with a product card. I want to be able to toggle the button when clicked from Add to cart to Remove from cart.

The problem is all of the products buttons toggle at the same time, and I wan't ONLY the individual product card buttons to be toggled referencing each individual product.

In my HTML

      <div v-for="product of products" :key="product.id">
         <span class="btn btn-primary mt-5 modal-toggle-btn"  @click="addGift(product, text, 'index')" v-show="!isAdded">Añadir a la box</span>
         <span class="btn btn-primary mt-5 modal-toggle-btn" @click="removeGift(product, 'index')" v-show="isAdded">Quitar de la box</span>
      </div>

Vue data

isAdded: false

My Vue methods

  addGift(product, index){
     this.campaign.selectedproducts.push({name: product.name });
     this.isAdded = true
  },
  removeGift(product, index){
     this. campaign.selectedproducts.splice(index, 1)
     this.isAdded = false
  },

Hi there , I tried to put an index into the params but I don't know how to use the method in the correct way (updated answer). Thanks! — Gibson
– Gibson, Commented Nov 19, 2020 at 20:54

tony19 · Accepted Answer · 2022-07-16 00:23:46Z

1

My suggestion is to:

Divide the product buttons as an individual component.
Use addedIds as an array to store added product ids instead of isAdded boolean.
Communicate parent and child click events with Vue event handling.
Store clicked product id in to the addedProductId on click events.
Check against addedProductId to make sure a product was added or not in child component.

Example:

ProductButtons.vue (child component)

<template>
  <div>
    <span class="btn btn-primary mt-5 modal-toggle-btn"  @click="addGift" v-show="!isAdded">Añadir a la box</span>
    <span class="btn btn-primary mt-5 modal-toggle-btn" @click="removeGift" v-show="isAdded">Quitar de la box</span>
  </div>
</template>

<script>
export default {
  name: "ProductButtons",
  props: {
    product: { type: Object, required: true },
    addedIds: { type: Array, required: true },
  },
  computed: {
    isAdded() {
      return this.addedIds.indexOf(this.product.id) > -1;
    },
  },
  methods: {
    addGift(){
      this.$emit('addGift', this.product);
    },
    removeGift(product){
      this.$emit('addGift', this.product);
    },
  }
}
</script>

In Your HTML

<template v-for="product of products" :key="product.id">
    <product-buttons :product="product" :addedIds="addedIds" @addGift="addGift" @removeGift="removeGift"></product-buttons>
</template>

Vue data

addedIds: []

Your Vue methods

  addGift(product){
     this.campaign.selectedproducts.push({name: product.name });
     // save product id as an added id
     const index = this.addedIds.indexOf(product.id);
     if (index === -1) {
         this.addedIds.push(product.id);
     }
  },
  removeGift(product){
     this.campaign.selectedproducts.splice(index, 1);
     // remove product id
     const index = this.addedIds.indexOf(product.id);
     if (index > -1) {
         this.addedIds.splice(index, 1);
     }
  },

edited Jul 16, 2022 at 0:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 20, 2020 at 2:43

Zugor

8818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gibson Over a year ago

Thanks a lot Zugor, I'm trying to implement this in my Rails app

Zugor Over a year ago

You are welcome. May be you can accept the answer if it's a correct answer for you.

Collectives™ on Stack Overflow

Toggle button text on a loop VUE

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related