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>