v-model 中的空值

Posted 2023-04-13

【中文标题】v-model 中的空值

【英文标题】：Null value in v-model

【发布时间】：2020-08-01 13:08:03

【问题描述】：

我有一个 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>

由于地址尚未建立，新记录为空。有什么办法可以让这个呈现出来，以便用户可以填充？

【参考方案1】：

如果office.address 为空，则访问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 不会使新属性具有反应性（阅读Change Detection Caveats）。

【讨论】：

谢谢，我希望有一种显示字段的默认方式，并在使用时创建它们。这是我需要的工作。