Vue.js在分配之前无法读取null / undefined属性

Question

我有一个来自axios.get的属性。

在我的data中定义为null（或''或[]）

axios调用位于created挂钩中。

首次加载该应用程序时，控制台将填充

 Error in render: "TypeError: Cannot read property 'service' of null"

当然，它实际上可以在网页上正确显示信息，因为service不为null，但是在axios提取数据之前显然会引发此错误。

这里最好的方法是什么？

Answer 1

您必须将数据指定为空对象，以避免出现此错误

    data: {
       your_object: {}
   }

your_object是在加载数据时将具有服务属性的对象。

（根据我的假设，在axios.get promise函数中，您会执行以下操作：

your_object.service = result.data;

）

Answer 2

您可以使用空值，非null值初始化数据字段，也可以在使用属性的模板之前使用v-if来保护访问。

Answer 3

在使用数据v-if的元素中添加service。

这里是一个例子：

<label v-if="service">{{service}}</label>

或使用父级（如果它是这样的数组）：

<label v-if="parent">{{parent.service}}</label>