How to Update an Object's value in Array in Vue js 3

1 year ago admin Vuejs

Let's assume that we are working in a shopping cart with Vue js 3, the user adds items to the cart, and the items are stored in an array, once he moves to view the cart he wants to update the quantity of a specific product, so how we can do that?


Update product quantity

So let's assume that the user wants to increment the quantity of the product in the cart you can do it like below:

                                                        
                                                                                                                        
const incrementQ = (item) => {
    let index = this.cartItems.findIndex(product => product.id === item.id);
    if(index !== -1) {
       this.cartItems[index].quantity += 1;
       Swal.fire({
         position: 'top-end',
         icon: 'success',
         title: 'Your item has been updated',
         showConfirmButton: false,
         timer: 1500
       });
    }
}

Related Tuorials

How to Get URL Query Params in Vue 3 Composition API

In this lesson, we will see how to get URL query params in Vue 3 composition API, let's assume that...


How to Use Vue js 3 to Generate Random Passwords

In this tutorial, we will see how to use Vue js 3 to generate random passwords, so our application w...


How to Load More Data on a Button Click Using Vue js 3

In today's lesson, we will see how to load more data on a button click using vue js 3, let's assume...


How to Display Images from Laravel Public Folder in a Vue Component

In this lesson, we are going to see how to display images from Laravel public folder in a Vue compon...


Create a Custom 404 Component using Vuejs 3

In today's lesson, we are going to see how to redirect a user to a custom 404 Vue Component if a rou...


How to Add an Auth Middleware with Vue-router

In this lesson we are going to see how to make an auth middleware using vue-router, the middleware w...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 2

In the second part of this project, we will add the home component, and display the products, we wil...


Shopping Cart Using Vue js 3 Composition API and Pinia Part 1

In today's tutorial, we are going to create a shopping cart using Vue js 3 composition API and pinia...


How to Get Query Params in Vue.js 3 Composition API

In this lesson, we are going to see how to get query params using Vue js 3 composition API, let's as...


How to Check Vue js Project Version with Code?

In today's lesson, we are going to solve the problem of getting the current version of a Vue js proj...