Vue-删除子对象后遍历对象

Question

我遇到了一个问题，这个问题在SO和其他论坛上都有很好的记录，在那里迭代一个数组并得到一个错误，因为对象可能没有在DOM中定义，或者可能还没有加载。

例如，以下-如果name或child也被迭代，您将得到一个undefined错误-因为child尚未定义。但是，如果要将{ child: { name: '' } }添加到parent对象中，则它可以按照定义正常工作。

<p> {{ parent.child.name }} </p>
data: () => ({
parent: {}
})

可以通过测试parent对象是否没有这样的数据来解决这个问题：

<div> v-if="Object.keys(parent).length != 0" >
<p> {{ parent.child.name }} </p>
</div> 

我遇到的问题是，如果我：1.使用嵌套对象创建页面。2.向对象添加新数据。3.删除添加的数据。

由于嵌套数组不再存在，我得到了一个未定义的错误。

我可以再次添加空的嵌套数组，但它们必须是检查对象是否为空的更灵活的方法。

Answer 1

在vue中，您可以使用watch属性来保持跟踪。

new Vue({
el: '#app',
data: () => ({
parent: {
child: {}
}
}),
watch: {
parent: function(val) {
console.log(val.child.length);
if (val.child.length === 0) {
this.parent.child = {};
}
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p> {{ parent.child.name }} </p>
</div>