[Vuejs]-Vue updating all components in v-for

by

2👍

✅

When you are checking condition instead of itemAdded as boolean, make it as an Array

create a new function in methods like this

isItemAdded(value) {
    if (this.itemAdded.includes(value)) {
          return true;
    }
    
    return false;
}

now, in the addItem function add the value to array this.itemAdded like this

this.itemAdded.push(item);

Changes in the HTML

<v-btn v-if="item.ITEM_STOCK && !isItemAdded(item)" style="margin-left: auto" 
color="orange" text @click="addItem(item)">
              Add
            </v-btn>
            <p v-else-if="isItemAdded(item)">Item Added</p>

And you are all set. Cheers

👤Hamza Awan

2👍

Your itemAdded value is boolean, so it has only 2 values: true and false, but you use it for every item, so if you change it then you change it for every item.

  1. This option for only 1 item can be added.

You should be more precise. For example, you can keep item name in itemAdded, so you will always know what item was added. In that case only one item can have this flag.

  1. This option if every item can be added once.

Another option is to treat itemAdded as array, so every item can be added (once).

First, change component data to have itemsAdded to be array:

...
data() {
    return {
      allItems: [],
      orderItems: {},
      itemAdded: [], // <--- here we change itemAdded to be array
    }
  },
...

Now we need to check itemAdded not as boolean, but as array of boolean:

...
<v-btn v-if="item.ITEM_STOCK && !itemAdded[item.ITEM_NAME]"
...
<p v-else-if="itemAdded[item.ITEM_NAME]">Item Added</p>
...

And finally we change the flag for item on button click:

...
methods: {
  addItem(item){
    ...
    this.itemAdded[item.ITEM_NAME] = true; // <--- see array here?
    ...

If you need, I can add some code examples.

👤Anton

Leave a comment