Increasing the value of a food topping element within a v-for list of toppings when clicking on the "+ add" button in Vue

Question

Increasing the value of a food topping element within a v-for list of toppings when clicking on the "+ add" button in Vue

I'm a newcomer to the world of JavaScript and Vue.js, currently working on a project to automate the ordering process for my pizza delivery pizzeria.

On the website, I have a list of toppings that customers can choose from. They have the option to select up to 4 toppings from the list, and they can choose the same topping 2, 3, or 4 times.

To manage this, I implemented a counter for each item in the list. The counter keeps track of the selected topping names in an array with a limit of 4, and this approach has been successful.

My question is, how can I allow users to select a topping and increase the quantity on the interface?

Below you can find my code snippet and some visual references:

Link to the CodePen

Vue.component('topping-selector', {
  data() {
    return {
      selectedToppings: [],
      toppingLimit: 4
    };
  },
  methods: {
    addTopping(topping) {
      if (this.selectedToppings.length < this.toppingLimit) {
        this.selectedToppings.push(topping);
      } else {
        console.log('You have reached the maximum number of toppings allowed.');
      }
    },
    increaseToppingAmount(topping) {
      const index = this.selectedToppings.indexOf(topping);
      if (index !== -1) {
        this.selectedToppings.splice(index, 1);
        this.selectedToppings.push(topping);
      }
    }
  }
});

Below is the HTML and template structure:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <title>Zune Pizza</title>
    <link rel="stylesheet" href="zunepizza.css">
    <link async href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link async href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="app">
        <topping-selector></topping-selector>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

</html>

Zune Pizza Topping Counter Display

Desired interface similar to the image:

iFood Topping Selection Interface

javascript vue.js

Answer 1

Answer №1

If you're looking to achieve a similar effect, check out this example: https://codepen.io/jasik/pen/NWxdLRg

<div id="menu">
    <ul v-for="item in menuItems">
      <li>
        <div class="item-details">
          <h3 class="item-name">{{item.name}}</h3>
          <div class="tag">
            <h5>{{item.type}}</h5>
          </div>
          <p class="item-description">{{item.desc}}</p>
        </div>
        <div class="item-image">
          <div class="flavorCounter" :id="item.name">
            <button @click="item.counter++" :disabled="item.counter === 4" :flavor="item.name" class="addFlavor controller-button"> + </button>

            <input :id='item.name' type="number" v-model="item.counter" class="flavorQuantity">

            <button @click='item.counter--' :disabled="item.counter === 0" :flavor='item.name' class="addFlavor controller-button"> - </button>
          </div>
          <img src="img/menu/item.jpg" alt="">
        </div>
      </li>
    </ul>
  </div>

data: {
    menuItems: []
  },
  created() {
    axios
      .get(
        "https://example-api.com/menu/items"
      )
      .then((response) => {
        let edited = response.data.items;
        edited.forEach((e) => {
          e.counter = 0;
        });
        this.menuItems = edited;
      })
      .catch((error) => {})
      .finally(() => {});
  },
  methods: {}

I hope this example proves to be useful. Good luck with your project!

Answer 2

If you're looking to achieve a similar effect, check out this example: https://codepen.io/jasik/pen/NWxdLRg

<div id="menu">
    <ul v-for="item in menuItems">
      <li>
        <div class="item-details">
          <h3 class="item-name">{{item.name}}</h3>
          <div class="tag">
            <h5>{{item.type}}</h5>
          </div>
          <p class="item-description">{{item.desc}}</p>
        </div>
        <div class="item-image">
          <div class="flavorCounter" :id="item.name">
            <button @click="item.counter++" :disabled="item.counter === 4" :flavor="item.name" class="addFlavor controller-button"> + </button>

            <input :id='item.name' type="number" v-model="item.counter" class="flavorQuantity">

            <button @click='item.counter--' :disabled="item.counter === 0" :flavor='item.name' class="addFlavor controller-button"> - </button>
          </div>
          <img src="img/menu/item.jpg" alt="">
        </div>
      </li>
    </ul>
  </div>

data: {
    menuItems: []
  },
  created() {
    axios
      .get(
        "https://example-api.com/menu/items"
      )
      .then((response) => {
        let edited = response.data.items;
        edited.forEach((e) => {
          e.counter = 0;
        });
        this.menuItems = edited;
      })
      .catch((error) => {})
      .finally(() => {});
  },
  methods: {}

I hope this example proves to be useful. Good luck with your project!

Answer 3

Answer №2

If you want to implement this functionality, consider adding a new property, such as quantity, to your items:

this.menu = response.data.menu.map(item => ({ ...item, quantity: 0 }))

Next, you can link the quantity to the elements in your HTML code and adjust it as needed:


<!--Remember to add a unique :key attribute for optimal Vue performance-->
<ul v-for="(meal, i) in menu" :key="i">
  ...
  <button @click="meal.quantity < 4 ? meal.quantity++ : ''" ... > + </button> 
  <input v-model="meal.quantity"...>
  <button @click="meal.quantity > 0 ? meal.quantity-- : ''" ... > - </button>
  ...
</ul>

If you need to identify the selected items, simply filter out items with a quantity greater than 0:

this.selectedItems = this.menu.filter(({ quantity }) => quantity > 0);

I hope this explanation helps clarify the process for you.

Answer 4

If you want to implement this functionality, consider adding a new property, such as quantity, to your items:

this.menu = response.data.menu.map(item => ({ ...item, quantity: 0 }))

Next, you can link the quantity to the elements in your HTML code and adjust it as needed:


<!--Remember to add a unique :key attribute for optimal Vue performance-->
<ul v-for="(meal, i) in menu" :key="i">
  ...
  <button @click="meal.quantity < 4 ? meal.quantity++ : ''" ... > + </button> 
  <input v-model="meal.quantity"...>
  <button @click="meal.quantity > 0 ? meal.quantity-- : ''" ... > - </button>
  ...
</ul>

If you need to identify the selected items, simply filter out items with a quantity greater than 0:

this.selectedItems = this.menu.filter(({ quantity }) => quantity > 0);

I hope this explanation helps clarify the process for you.

Increasing the value of a food topping element within a v-for list of toppings when clicking on the "+ add" button in Vue

Answer №1

Answer №2

Similar questions

Reveal the MongoDB database connection to different sections within a Next.js 6 application

The fancybox's excess content is concealed

What is the best method for incorporating dynamic page transitions when navigating between individual pages?

What is the best way to divide the Jquery.js file into smaller, separate files?

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

What is the best way to utilize the oninput function in Jade?

The image has been restricted from view due to CORS specifically on Windows operating systems

Translate a portion of a painting by utilizing context.putImageData()

Can someone guide me on the process of adding a personalized emoji to my discord bot?

What is causing the dysfunction of angular2 form when used with the HTML <form> tag?

Receiving a notification when attempting to log in with incorrect credentials

I am seeking to retrieve data from MongoDB by utilizing the limit feature, while also sending a specific query

React error: File undefined (cannot be exported)

Can you show me how to access the elements of a JSON object named "foo.txt" and print them out?

Why does Vue reset a v-binded property when a v-model property changes?

Displaying a dynamic map with real-time coordinates sourced from a database using a combination of ajax and php

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

Implementing pagination and filtering in a single MERN controller

The 'fetch' operation could not be completed on the current window due to a TypeError