title: VUE - [food toppings counter ] how increase value of element -topping- in a v-for list -of toppings- when click on "+ add" button
body: <p>I'm a beginner in js and vue and I'm building a website to automate the orders of my pizzeria delivery.</p>
  
  <p>I have a v-for list of toppings, customers can choose up to 4 toppings from a list and he can select 2, 3 or 4 times the same topping.</p>
  
  <p>I created a counter for each item in the list, which stores the selected topping name in an array with a limit of 4. This worked.</p>
  
  <p>How can I select and increase the amount of topping selected in the interface?</p>
  
  <p>Below I have my code, and some visual references</p>
  
  <p><a href="https://codepen.io/mordzin/pen/VwePBzq" rel="nofollow noreferrer">https://codepen.io/mordzin/pen/VwePBzq</a></p>
  
  <pre><code>var App = new Vue({
    el: '#app',
    data: {
      flavorCounter: 0,
      cardapio: [],
      order: [],
      selectedItem: null
    },
    mounted() {
          // const axios = require('axios');
          axios.get('https://v2-api.sheety.co/4a5e4bb41d15a6ea344152fafca024db/zunepizza/cardapio')
          .then((response) =&gt; {
  
            this.cardapio = response.data.cardapio
          })
          .catch((error) =&gt; {
  
          })
          .finally(() =&gt; {
  
          })
        },
  
        methods:{
  
          addFlavor(){
  
            if (this.flavorCounter &lt;= 3) {
              flavor = event.target.getAttribute('flavor')
              this.order.push(flavor);
              this.flavorCounter ++
  
              console.log(this.order)
              console.log(this.flavorCounter)
            } else {
              console.log('Maximo de sabores')
            }
          },
  
          removeFlavor(){
  
              if (this.flavorCounter &gt;= 1) {
              flavor = event.target.getAttribute('flavor')
  
              this.order.splice(index, 1);
              this.flavorCounter --
  
              console.log(this.order)
              console.log(this.flavorCounter)
            } else {
            }
          },
  
        }
  
  
      });
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width,minimum-scale=1"&gt;
      &lt;title&gt;Zune Pizza&lt;/title&gt;
      &lt;link rel="stylesheet" href="zunepizza.css"&gt;
      &lt;link async href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;link async href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet"&gt;
  
  
      &lt;!--     &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;template&gt;
              &lt;div id="cardapio"&gt;
                  &lt;ul v-for="cardapio in cardapio"&gt;
                      &lt;li&gt;
                       &lt;div class="item-info"&gt;
                          &lt;h3 class="item-title"&gt;{{cardapio.name}}&lt;/h3&gt;
                          &lt;div class="tag"&gt;
                              &lt;h5&gt;{{cardapio.type}}&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;p class="item-title"&gt;{{cardapio.desc}}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="item-img"&gt;
                          &lt;div class="flavorCounter" :id="cardapio.name"&gt;
                              &lt;button
                              @click="addFlavor()"
                              :flavor="cardapio.name"
                              class="addFlavor controller-btn"&gt; + &lt;/button&gt;
  
                              &lt;input :id='cardapio.name' type="number" value="0" class="flavorQuantity"&gt;
  
                              &lt;button
                              @click='removecliFlavor()'
                              :flavor='cardapio.name'
                              class="addFlavor controller-btn"&gt; - &lt;/button&gt;
                          &lt;/div&gt;
                         &lt;img src="img/cardapio/baska.jpg" alt=""&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
  &lt;/div&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  &lt;script src="zunepizza.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/A1zMk.png" rel="nofollow noreferrer">zune pizza interface topping counter</a></p>
  
  <p>i need something like the image below</p>
  
  <p><a href="https://i.stack.imgur.com/7vf0d.png" rel="nofollow noreferrer">ifood interface topping counter</a></p>