时间戳

首页 > 解决方案 > Vue - 删除子对象后迭代对象

vue.js - Vue - 删除子对象后迭代对象

问题描述

我遇到了一个问题，该问题在 SO 和其他论坛上有很好的记录，其中一个人遍历数组并收到错误，因为该对象可能未在 DOM 中定义或可能尚未加载。

例如下面的 - 如果nameorchild也被迭代，你会得到一个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.jsvuejs2

解决方案

在 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>

推荐阅读