here lies my code
import { defineStore } from "pinia";
export const DB_CART = defineStore("CART", {
state: () => ({
CART: [
{
$id: "62616ffc6d13e2a9eb04",
quantity: 1
},
{
$id: "6261711719aa15827836",
quantity: 1
},
{
$id: "6275c020740fbd04db50",
quantity: 1
}
],
}),
actions: {
// INCREMENT PRODUCT QUANTITY IN CART
incrementCartQuantity(id) {
const cartItem = this.CART.find(item => item.$id = id);
cartItem.quantity ;
},
// DECREMENT PRODUCT QUANTITY IN CART
decrementCartQuantity(id) {
const cartItem = this.CART.find(item => item.$id = id);
if (cartItem.quantity === 1) return
cartItem.quantity--;
},
// ADD PRODUCT TO CART
addToCart(item) {
this.CART.push(item)
}
},
persist: true
})
I'd like to understand why when I increment or decrement a cart item starting from the second in the array, the array rearranges.
incrementCartQuantity(id) {
const cartItem = this.CART.find(item => item.$id = id);
cartItem.quantity ;
console.log(this.CART) /*EXPECTED OUTPUT
[
{
$id: "62616ffc6d13e2a9eb04",
quantity: 1
},
{
$id: "6261711719aa15827836",
quantity: 1
},
{
$id: "6275c020740fbd04db50",
quantity: 1
}
]
*//*RETURED OUTPUT
[
{ $id: "6261711719aa15827836", quantity: 2 },
{ $id: "6261711719aa15827836", quantity: 1 }, INCREMENTED OBJECT
{ $id: "6275c020740fbd04db50", quantity: 1 }
]
*/
},
in my Vue component, on incrementCartItem, I find out that the entire array kind of shuffles and pops out the one at the top, and replaces it with the item which is being mutated I don't think the array should be affected in any way.
CodePudding user response:
Your find
method is doing an assignment "=" instead of a comparison "===".
Replace
this.CART.find(item => item.$id = id);
with
this.CART.find(item => item.$id === id);
in both cart methods.
Your find
assigns the searched id
to the first item's $id
, every time it runs.