vue template报错undefined

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 错误。根据项目的实际情况选择合适的方式即可。