Vue - 删除子对象后迭代对象答案

【问题标题】：Vue - Iterating through an object after deleting the child objectsVue - 删除子对象后迭代对象
【发布时间】：2020-07-30 08:49:51
【问题描述】：

我遇到了一个问题，该问题在 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.删除添加的数据。

我收到一个未定义的错误，因为嵌套数组不再退出。

我可以再次重新添加空嵌套数组，但它们必须是一种更巧妙的方法来检查对象是否为空。

【问题讨论】：

标签： vue.js vuejs2

【解决方案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>

【讨论】：