Как предотвратить ошибку при перечислении длины дочернего узла firebase в vue.js с помощью функции «Object.keys»?

Question

Представьте себе приложение Vue.js, в котором структура данных в firebase будет выглядеть примерно так:

item: {
  name: itemName,
  childOne: {
    subChildA: true,
    subChildB: true
  },
  childTwo: {
    subChildA: true,
    subChildB: true
  }
}

Теперь у меня есть компонент, в котором мне нужно указать длину дочерних узлов (эти дочерние узлы будут добавлены только позже). Моей первой мыслью было просто сделать это, но эта стратегия не работает:

<tbody>
  <tr v-for="item in items" >
     <td>
        {{item.childOne.length - item.childTwo.length}}
     </td>
   </tr>
</tbody>

Итак, в качестве альтернативы я получил такую ​​длину:

<tbody>
   <tr v-for="item in items" >
      <td>
         {{Object.keys(item.childOne).length - Object.keys(item.childTwo).length}}
      </td>
    </tr>
</tbody>

Как я уже сказал, мне нужно визуализировать этот компонент до создания дочерних элементов ... Эти дочерние узлы позже условно создаются с помощью облачной функции Google, поэтому я неизбежно начну с этой простой структуры:

item: {
  name: itemName,
}

... но на этом этапе я получаю сообщение об ошибке:

TypeError: Невозможно преобразовать неопределенный или нулевой объект в Function.keys ()

Я думаю, что если я использую первую стратегию, vue.js достаточно умен, чтобы избежать этой ошибки отображает компонент и ничего не отображает, если нет дочерних элементов, но он не может получить длины .

Вторая стратегия отлично работает, когда я добавляю дочерние элементы, но она не может справиться с первоначальным отсутствием данных и даже не отображает представление .

Есть ли способ предотвратить эту ошибку, используя вторую стратегию, когда дочерние узлы еще не существуют?

Answer 1

Вы можете использовать оператор двойной трубы для предоставления пустого объекта по умолчанию для случаев, когда item.childOne или item.childTwo не определены.

Изменить это:

{{Object.keys(item.childOne).length - Object.keys(item.childTwo).length}}

К этому:

{{Object.keys(item.childOne || {}).length - Object.keys(item.childTwo || {}).length}}

Пример малого масштаба:

var test = {};
console.log(Object.keys(test.childOne || {}).length);

Однако вы должны помнить, что Vue не может обнаружить добавление или удаление свойств. Согласно документам :

Поскольку Vue выполняет процесс преобразования получателя / установщика во время инициализации экземпляра, в объекте данных должно присутствовать свойство, чтобы Vue смог преобразовать его и сделать его реактивным.

В зависимости от вашего конкретного случая использования вам может потребоваться определить childOne во время инициализации или преобразовать его в массив, чтобы вы могли воспользоваться преимуществами наблюдаемых методов мутации массива Vue .