Update item quantity in table

Question

Guys I’m starting with Vue and I’m having a little difficulty. In the image below I have a table with some items and when I will increase the amount of the item Orange for example is increased all other items, as fixed this?

Below my code

new Vue({
  el: '#app',
  data() {
        return {
            quantidade: 1,
            Opcionais: [
                { Code: 1, Nome: 'Abacaxi', Valor: "50.00" },
                { Code: 2, Nome: 'Abacate', Valor: "50.00" },
                { Code: 3, Nome: 'Morango', Valor: "60.00" },
                { Code: 4, Nome: 'Maçã', Valor: "17.00" },
                { Code: 5, Nome: 'Laranja', Valor: "30.00" }
            ]
        }
    },

    methods: {
      adicionar() {
          this.quantidade++
      },
      
      remover() {
          if(this.quantidade === 0) {
              this.quantidade = 0
          } else {
              this.quantidade--
          }
      }
    }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <template>
    <div class="usuario-lista">
        <table>
            <thead>
                <tr>
                    <th>#Code</th>
                    <th>Nome</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(opcional, row) in Opcionais" :key="opcional.Code">
                    <td>
                        <button @click="remover">-</button>
                        <input type="text" :value="quantidade">
                        <button @click="adicionar(row)">+</button>
                    </td>
                    <td>{{ opcional.Nome }}</td>
                    <td>{{ opcional.Valor }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
</div>

Answer 1

Within the data(){return{}} the variables you are using are declared. In your case, only one variable is declared, quantidade: 1

data() {
        return {
            quantidade: 1,
            Opcionais: [
                { Code: 1, Nome: 'Abacaxi', Valor: "50.00" },
                { Code: 2, Nome: 'Abacate', Valor: "50.00" },
                { Code: 3, Nome: 'Morango', Valor: "60.00" },
                { Code: 4, Nome: 'Maçã', Valor: "17.00" },
                { Code: 5, Nome: 'Laranja', Valor: "30.00" }
            ]
        }
    },

So when you update it with add and/or remove methods:

methods: {
      adicionar() {
          this.quantidade++
      },

      remover() {
          if(this.quantidade === 0) {
              this.quantidade = 0
          } else {
              this.quantidade--
          }
      }
    }

You are updating the same variable that is used in all fields.

---

To resolve this, state one variable for each one of the <input></input>.

A hint would be to use one method to add and another to remove, passing the name of the variable you want to add or subtract:

adicionar(variavel, quantidade){
   variavel += quantidade;
}

remover(variavel, quantidade){
   variavel -= quantidade;
}

There are several ways to implement this, in the original documentation of website you will find several examples, or you can watch some courses partially free it is up to you to select the one that judges more performatic or that has more clarity, this is not the case...

Answer 2

One option is to put the quantity as a chave in each objeto.

Then just increase/decrease the click. If that’s it, you don’t even need to create one método.

Example (I added a column with the * quantity value):

new Vue({
  el: '#app',
  data() {
        return {
            quantidade: 1,
            Opcionais: [
                { Code: 1, Nome: 'Abacaxi', Valor: "50.00", Qtd: 0 },
                { Code: 2, Nome: 'Abacate', Valor: "50.00", Qtd: 0 },
                { Code: 3, Nome: 'Morango', Valor: "60.00", Qtd: 0 },
                { Code: 4, Nome: 'Maçã', Valor: "17.00", Qtd: 0 },
                { Code: 5, Nome: 'Laranja', Valor: "30.00", Qtd: 0 }
            ]
        }
    }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <template>
    <div class="usuario-lista">
        <table>
            <thead>
                <tr>
                    <th>#Code</th>
                    <th>Nome</th>
                    <th>Valor Unitário</th>
                    <th>Valor Total</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(opcional, row) in Opcionais" :key="opcional.Code">
                    <td>
                        <button @click="opcional.Qtd ? opcional.Qtd-- : false">-</button>
                        <input type="text" :value="opcional.Qtd">
                        <button @click="opcional.Qtd++">+</button>
                    </td>
                    <td>{{ opcional.Nome }}</td>
                    <td>{{ opcional.Valor }}</td>
                    <td>{{ opcional.Valor * opcional.Qtd }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
</div>