项目场景:

在前端项目中会遇到后端返回一个对象中存在多个实体的对象,若我们直接渲染(直接渲染第三级),例如:
html:

<span>设备IMEI{{items.deviceVO.imei}}</span><br>

data:

data () {
   items: ''
}

虽然不影响渲染,但vue在浏览器会抛出警告。

问题描述及原因分析:

问题:

Error in render: “TypeError: Cannot read properties of undefined (reading ‘imei’)”

分析(参考网上及猜想)

Vue 在页面加载时,在 created 钩子函数 之前会初始化 data{} 中的数据,在 created 钩子函数 之后 开始编写模板,直接渲染

<span>设备IMEI{{items.deviceVO.imei}}</span><br>

data{} 中没有定义一级对象(items)中的第二级对象(deviceVO),所以会报 undefined 的错误,当 mounted 钩子函数 请求后台获取 json(嵌套对象) 绑定渲染,所以不影响到渲染结果。(虽然不影响,但是就是看他不爽)

解决方案:

方案一

在三级标签前加 v-if 校验,如果没有该对象,就不显示,等请求后端获取数据后,在响应,例如:

<span v-if="items.deviceVO">设备IMEI{{items.deviceVO.imei}}</span><br>

适用场景: 因为比较快捷,用于嵌套对象比较少,嵌套对象变量少

方案二

直接将页面渲染所需要的对象提前定义,例如:

data () {
   items: {
        // 对象一
        deviceHandleVO: '',
        // 对象二
        deviceSensorVO: '',
        // 对象三
        deviceVO: ''
      },
}

适用场景: 用于嵌套对象比较大,是代码耦合度低

Logo

前往低代码交流专区

更多推荐