Блог

Служебные данные поступают от картографов, использующих хранилище vuex. Когда я отображаю значения, я получаю сообщение об ошибке

Скриншот ошибки

Я получаю сообщение об ошибке в консоли, но данные все равно отображаются. Почему это происходит? Как я могу удалить ошибку

 <table border="0" id="tab">
             <tr><td >Name </td><td >: {{services[0].organization.name}}</td></tr>
             <tr><td>Name of Organisation </td><td>: {{services[0].organization.organizationName}}</td></tr>
             <tr><td>Email </td><td>: {{services[0].organization.email}}</td></tr>
             <tr><td>Mobile </td><td>: {{services[0].organization.phone}}</td></tr>
             <tr><td>Location </td><td>: {{services[0].organization.address.no}} {{services[0].organization.address.street}} {{services[0].organization.address.locality}} {{services[0].organization.address.state}}</td></tr>
             <tr><td>Zipcode </td><td>: {{services[0].zipcode}}</td></tr>
</table>
 

Очень простым и простым решением было бы скрыть table , пока services[0] не будет доступно:

 <table border="0" id="tab" v-if="services[0]">
 

Я полагаю, что начальное состояние or services является пустым массивом, поэтому, когда происходит рендеринг первого компонента, он показывает эти ошибки, потому services[0].organization что к нему невозможно получить доступ в этот самый момент.

Идя дальше, вы можете определить computed prop, который будет возвращать organization объект с некоторыми значениями по умолчанию, если вы вообще не хотите скрывать таблицу.

 <tr><td >Name </td><td >: {{organization.name}}</td></tr>
 

   computed: {
     organization () {
       if (!this.services[0]) {
          return {
            name: '',
            //  other organization props here
          }
       }
       return this.services[0].organization
     }
  }
 

Когда код vue выполняется в первый раз. Службы [0] недоступны в самый первый момент.

Я получаю сообщение об ошибке в консоли, но данные все равно отображаются. Почему это происходит?

Как только службы [0] будут доступны, поскольку работает двусторонняя привязка данных, она обновит значения в DOM (объектной модели документа). Итак, вот почему ваши данные отображаются с предупреждением.

вы можете просто добавить атрибут v-if в тег таблицы.

 <table border="0" id="tab" v-if"services[0]">
 

Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальными документами по архитектуре MVVM.
Модель Vue

Проверьте длину служб. Попробуйте это.

 <table border="0" id="tab" v-if"services.length > 0">