Vue项目 template报错undefined
在 Vue 项目中,我们有时会遇到页面调用数据的问题,即在数据加载完成之前,页面已经尝试访问数据,导致出现 undefined 错误。
例如:一进入页面直接回显数据
<template>
<div>
{{ data[0].name }}
</div>
</template>
<script setup>
const data = []
</script>
由于 data
是一个空数组,尝试访问 data[0].name
就会导致错误。错误信息如下:
TypeError: Cannot read property ‘name’ of undefined
如何解决
1、可以通过给个默认值的方式
在
data
数组中添加一个默认的对象,这样即使数据还未加载完成,页面也不会报错。
<template>
<div>
{{ data[0].name }}
</div>
</template>
<script setup>
const data = [{name:'我是name'}]
</script>
2、通过 v-if
判断一下
在模板中添加
v-if
指令,只有当data
数组非空且长度大于0时,才会渲染相关的 DOM。
<template>
<div v-if='data && data.length'>
{{ data[0].name }}
</div>
</template>
<script setup>
const data = []
</script>
以上两种方式都可以避免在数据加载完成之前访问数据导致的 undefined 错误。根据项目的实际情况选择合适的方式即可。