Нулевое значение в v-модели

У меня есть приложение Nativescript-Vue, в котором я выполняю вызов REST, чтобы вернуть ответ, который будет отображаться. Он не всегда может быть полностью заполнен, и когда это происходит, я получаю сообщение об ошибке, например:

[Предупреждение Vue]: Ошибка при рендеринге: «TypeError: null не является объектом (оценка '_vm.office.address.addressLine1')»

Вот ответ REST, который я получаю от сервера:

{
   "officeId":2,
   "name":null,
   "beginDate":[
      2020,
      4,
      18
   ],
   "endDate":null,
   "officeType":null,
   "address":null
}

А вот код Vue, у которого есть проблемы:

<StackLayout class="nt-input">
   <Label text="Address Line 1" class="m-b-5"/>
   <TextField :editable="!isViewOnly" v-model="office.address.addressLine1"  v-shadow="2" hint="Enter address line 1" class="-border"/>
</StackLayout>

Поскольку адрес не был установлен, для новых записей он будет нулевым. Есть ли способ получить это для рендеринга, чтобы пользователи могли заполнить?


vue.js nativescript-vue
person sonoerin    schedule 19.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если office.address имеет значение null, то доступ к office.address.addressLine1 всегда будет приводить к этой ошибке. Перед этим вы должны убедиться, что address не равно нулю.

После получения данных вы можете проверить, является ли address нулевым, а затем установить его на новый пустой адресный объект, который вам нужен:

// Make the request
const office = await fetchOffice()

// Ensure that address is defined
if (!office.address) {
  office.address = {
    addressLine1: ''
  }
}

// Now that we have defined all properties on the object, we
// can assign it to the component instance to make it reactive
this.office = office

Важно, чтобы вы определили любые новые свойства объекта до назначения его компоненту, иначе Vue не сделает новые свойства реактивными (прочтите Предостережения при обнаружении изменений).

person Decade Moon    schedule 19.04.2020
comment
Спасибо, я надеялся, что есть способ отображения полей и их создания по умолчанию при использовании. Это работает так, как мне нужно. - person sonoerin; 19.04.2020