Vue: Not getting 'Avoid mutating a prop directly' error when using .splice() or .shift() when the prop is an array

Created on 15 Mar 2018  路  1Comment  路  Source: vuejs/vue

Version

2.5.15

Reproduction link

https://jsfiddle.net/a3js25L2/6/

Steps to reproduce

Click on the 'x' button next to a list item

What is expected?

I maybe understanding this wrong but I thought changing the value of a bound prop from a child component was a no-go, when I was testing and I used array.splice() on the prop, I was expecting it to give me an error

What is actually happening?

It doesn't give the error and I can see in devtools that the parent updates properly. Am I missing something or is this correct? I assumed I'd have to emit back to the parent and change the value there but this works. Assigning it a completely new value however, gives me the error.

Most helpful comment

The warning appears when you try to override the prop value: list = [] in example component. Modifying the array is still possible (but discouraged). You should indeed emit an event to the parent and it modify the array.
This is because of Javascript behaviour regarding objects: They are passed by reference, it would be very costly to watch every single property to be observed for the sake of a development warning

>All comments

The warning appears when you try to override the prop value: list = [] in example component. Modifying the array is still possible (but discouraged). You should indeed emit an event to the parent and it modify the array.
This is because of Javascript behaviour regarding objects: They are passed by reference, it would be very costly to watch every single property to be observed for the sake of a development warning

Was this page helpful?
0 / 5 - 0 ratings