发现Vue3 v-if里遇到null.length会直接卡死奔溃

发现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)上去取属性呢?

针对你的问题,有几个修复办法:

  1. 保证对象不为空

    todayData 初始值给 [],以后赋值的时候也记得把 nullundefined 处理掉,比如 this.todayData = response.data ?? []

  2. 在使用的时候判断是否空值

    可以使用可选链运算符 ?. 和空值合并运算符 ??,比如 todayData?.length ?? 0。这句话表示如果 todayData 不是 undefined 或者 null 的时候,取其 .length 值,否则 ?. 运算结果为 undefined。如果前面的运算结果是 undefined 或者 null,会使用 ?? 后面的值。

    如果不熟悉新语法,用判断也是可以的 todayData ? todayData.length : 0。与前面的区别在于,如果 todayData 没有 length,这里得不到 0 值。

  3. 使用计算属性

    如果多处使用 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

回到顶部