Prevent reactivity of data once pushed to an array.

Can you post more of your child component? Specifically how you're setting selectedProduct and emitting it to the parent?

You have to "clone" the data, so you don't push a reference to the original variable into the array, but a new one, which isn't coupled to the select. If you're Using lodash, you could try $emit('your-event', _.cloneDeep(your-var)) a possible way without lodash would be $emit('your-event', JSON.parse(JSON.stringify(your-var)))

Hi.

So, rookie mistake, I was trying to figure it out while I was waiting for an answer, and as a result messed it up completely beyond any saving, so I cant really share anything with you... whoops!

I have now discovered the problem (again a rookie mistake) that when I was pushing my product to the basket and displaying the basket there is no Unique ID to use as a key.

basket: [
      { id: 1, name:'Product 1' , size: 'Large' },
      { id: 1, name:'Product 1' , size: 'Small' },
      { id: 2, name:'Product 2' , size: 'Small' },
]

As you can see there are 3 products in the cart, 2 have the same product ID albeit with different customisations.

Now what can I do to work around this? I need to set each basket item ID as unique, but also include the product_id.

Currently I am pushing the product to the basket array in the most basic way like so:

//Productlist Component (Child)
addToBasket(product) {
      this.$emit("addToCart", product);
}

// Shopping App (Parent)
<Products @addToCart="addToCart" />
//...

addToCart(product) {
      this.basket.push(product);
 }

Thanks for your help in advance :)

M

The easiest way would be to generate a "pseudo-id" using either a random/uniquely generated one or to concat some info from your object e.g.

addToBasket(product) {
    product.trackId = `${product.id}-${product.size}`
    this.$emit("addToCart", product);
}

Hi.

So it turns out I haven't solved the issue.

Whats happening is that when the 'Customised' button is clicked, it assigns the selected product and any customisations to this.selectedProduct. When finished and the user clicks Add To Basket, the this.selectedProduct get pushed to this.basket. What I then would like is this.selectedProduct to reset so that the next product can be selected, customised e.g.

Whats happening at the moment is when someone selects the same product again for customising, it is remembering its link to the product already in the cart and amending that entry, not creating a new instance.

e.g.

(1) Product 1 - Large selected , Added to basket

(2) Product 1 chosen again - Small selected, Added to basket, but changes (1) to small aswell.

I have tried reseting this.selectedProduct = [] but it still links to the product in the cart. I somehow need to remove that link each time the add to cart button is clicked so that each item in the basket array are unique and non reactive.

I hope this makes sense.

As always thanks for your help.

M

Have you tried my first answer? Sounds like you're pushing a reference and not a new object

Spamhead2k

Im so sorry, I must have missed your answer! It worked beautifully. Top marks sir!

Thanks

Mitch

Glad I could help :)