One issue I encountered is with a model from a backend where the property that typically contains an array of elements can be nullable. To handle this, I initialize it to an empty array. However, this seems to disrupt my ability to update the array in the child component. Here's a snippet of the code:
Vue.component('Notes', {
template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button @click="add">Add</button></div>',
props: {
items: Array,
},
methods: {
add() {
console.log('added');
this.items.push({ text: "new item" });
}
}
});
new Vue({
el: "#demo",
data() { return { model: { } }},
created() { if(!this.model.items) this.model.items = []; }
});<script src="https://unpkg.com/vue"></script>
<div id="demo">
<Notes :items="model.items" />
</div>If the data in the main component is model: { items : [] }, everything works as expected. However, I can't guarantee control over the backend data to ensure this.