项目场景:
Vue中有获取dom的属性ref,ref可能会引起bug,甚至都不会在测试环境中发现。还有对数组的操作,也是常常会出现的bug。以下就是对这两种问题的描述和修复。
问题描述
在一个input标签上同时使用v-if指令和ref属性
代码如下:
<input
ref="input"
v-if="inputLabel"
/>
当inputLabel为false时,使用this.$refs.input.value是获取不到的,会产生TypeError: Cannot set properties of undefined (setting 'value')报错
解决方案:
// 判空
function isEmpty(val){
return val === null || val === undefined || (typeof val === 'string' ?val.length === 0 : false)
}
// 先判空再取值
if(!isEmpty(this.$refs.input)){
const value = this.$refs.input.value;
}
问题描述:
在一个空数组上获取值
代码如下:
const arr = [];
const value = arr[0].value;
报错:Uncaught TypeError: Cannot read properties of undefined (reading 'value')
解决方案:
const arr = [];
if(Array.isArray(arr)&&arr.length>0){
const value = arr[0].value;
}
提示:写完代码后一定要检查数组和ref值的呀,进行判空处理,很多时候测试老师测不出来的,上线出现问题了,就要扣绩效了!其实是很小的错❌,所以写完代码后一定要检查这些可以避免掉了问题!