发现Vue3 v-if里遇到null.length会直接卡死奔溃
<template> <div v-loading="!todayData">
<div class="tips-container">
<div v-if="todayData.length > 0">
今天共
<span class="text-main-color text-large">{{ todayData.length }}</span>
次课
</div>
<div v-else>今天没有课,放松一下叭</div>
</div>
</div>
</template>
data: function () { return {
scheduleData: null,
scheduleStartTime: null,
todayData: null,
};
},
反复调试,发现上面代码,网站进去会直接白屏卡住,console都打不开,卡一会就弹奔溃提示。
把todayData改成[]之后问题不出现,把todayData.length改成todayData问题也不出现。这个是Vue3本身的问题还是我的理解不对?
回答:
null.length
这是语言级别的运行时错误,跟 Vue 没关系 —— 怎么可能在一个空对象(或者 undefined
)上去取属性呢?
针对你的问题,有几个修复办法:
保证对象不为空
即
todayData
初始值给[]
,以后赋值的时候也记得把null
和undefined
处理掉,比如this.todayData = response.data ?? []
。在使用的时候判断是否空值
可以使用可选链运算符
?.
和空值合并运算符??
,比如todayData?.length ?? 0
。这句话表示如果todayData
不是undefined
或者null
的时候,取其.length
值,否则?.
运算结果为undefined
。如果前面的运算结果是undefined
或者null
,会使用??
后面的值。如果不熟悉新语法,用判断也是可以的
todayData ? todayData.length : 0
。与前面的区别在于,如果todayData
没有length
,这里得不到 0 值。使用计算属性
如果多处使用
todayData.length
,又不想给(或不能)给他赋数组值,可以考虑使用计算属性来处理。这里可以计算length
,也可以计算todayData
,关键看应用场景。computed: {
todayDataLength() { return this.todayData?.length ?? 0; },
validTodayData() { return this.todayData ?? []; }
}
回答:
vue模板编译的时候,遇到这null.length这句是会报错的,报错之后模板是不会编译渲染的,解决办法:todayData:[](给todayData赋值为空数组)
以上是 发现Vue3 v-if里遇到null.length会直接卡死奔溃 的全部内容, 来源链接: utcz.com/p/936466.html