我有一个来自后端的模型,其中通常包含元素数组的属性可以为空。发生这种情况时,我会将其初始化为一个空数组。但是,这样做似乎破坏了我更新子组件中数组的能力。示例代码可以在下面找到。
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>
如果主组件中的数据为 model: { items : [] }
,则一切正常。但我无法控制后端数据来保证这一点。
答案 0 :(得分:1)
你应该发出一个事件来更新父组件中的 prop
在子组件中:
ec
在父模板中为发出的事件添加一个处理程序:
this.$emit('add-item',{
text: "new item"
});
<Notes :items="model.items" @add-item="AddItem" />
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.$emit('add-item', {
text: "new item"
});
}
}
});
new Vue({
el: "#demo",
data() {
return {
model: {
items: [] //init it here in order to avoid reactivity issues
}
}
},
methods: {
AddItem(item) {
this.model.items.push(item)
}
},
});
答案 1 :(得分:1)
在您的 Notes 组件中,您在数据中声明了一个模型,然后在下面添加一个 items[](如果尚不存在)。这不是一个好的做法,并且可能是导致您出现问题的原因。 Vue 需要知道它正在监视的对象的所有属性。当 Vue 第一次处理对象时,它们需要在那里,或者你需要 add them with Vue.set().