Error: Invalid mutation: Cannot set [value] on [array]. [array] is read-only

Question

I have lightning playground where I have an array and for each item in the array a simple component with a remove button displays. When you click the remove button the component should no longer display. I have array = [1, 2, 3] and when clicking the button I get the error message Error: Invalid mutation: Cannot set "0" on "1,2,3". "1,2,3" is read-only.

The playground is located here so you can see the code. Simply click one of the buttons which should then disappear however the error message displays instead.

The container component contains the app component which can contain many child components.

Answer 1

An attribute marked @api can't be modified by the component once set (it may only be set once during the component's construction). You need to copy the array first. Here's the change you need to make:

var array = [...this.cartItems];

This will copy the array so you have a variable you can update. I've updated your playground for you.