解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)

这个报错 使用的数据无法读取此属性

1.检查你的data定义属性是否没有你使用的属性，如果没有，定义一个，如下： #template <div class="he-info__item"> <span class="he-label">收货人姓名：</span> <span class="he-value">{ { detail.buyer.name }}</span> </div> <div class="he-info__item"> <span class="he-label">联系方式:</span> <span class="he-value">{ { detail.buyer.mobile }}</span> </div>

#js export default { data () { detail: { buyer: { name: "", mobile: "", }, user: { nickname: "", }, }, } }

//2.也可能是后端返回给您的数据没有这个属性 或者 有些返回有数据 有的是 null ， // 此时不能写 { { item.xxx || “” }} 不然会报错 Cannot read properties of undefined (reading ‘xxx‘)“ 可以这样解决 如下： #template <div v-if="!!item.invite">{ { item.invite.nickname }}</div> ///有这个属性才能显示 //或者这样也可以 <div v-if="item?.invite">{ { item.invite.nickname }}</div> ///有这个属性才能显示

<div v-else>{ { "" }}</div> ///没有返回 或者 null 直接填 “”

网上还有一个 视图未更新 数据尚未返回 你开始使用这个属性 可以加个 this.$nectTick (()=>{//获取数据} 包裹一下