I'm trying to figure out the most efficient way to handle a situation where I need to mutate a list of items within a component that accepts this list as a prop. To address this, I referred to the VueJs documentation and set the initial value of a data property to be the same as the prop value, so that I could make changes to the data property when needed.
export default {
props: {
items: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
itemList: this.items
}
}
}
However, I noticed that the itemList property remains stuck at the initial value and doesn't update if the parent component provides a new value for items. This is because the component has already been rendered and does not re-evaluate its data properties. To address this issue, I added a watcher to monitor any changes in items:
watch: {
items() {
this.itemList = this.items;
}
}
I came across this other question which had a similar problem and used the same solution that I implemented. However, I am curious to know if this method is considered reliable and standard practice, or if there are alternative approaches to resolve this issue?