Vue Cannot read properties of null (reading '$el') 错误,找出真凶了
Cannot read properties of null (reading '$el')
菜鸟,在vue3 开发遇到的问题,百思不得其解,为什么会为null, 先上代码大概的代码结构:
<template> <el-Dialog v-model="isLoading"> <el-table ref="tableRef"> <el-table-column prop="name"/> </el-table> </el-dialog> </template> <script steup> //省略...import const isLoading= ref(false); const tableRef = ref(null); const openDialog = asnyc (row: any) =>{ //省略...加载数据,其他处理 consolog.log(tableRef.value); //此处会输出null const elment = tableRef.value.$el; isLoading.value = true; }; </script>
调试了很久,怎么会为null, 明明已经检查了tableRef已经声明并正确设置ref,初始化都没问题。如果说DOM没有渲染完毕,尝试在
onMounted里面输出正常是可以,因为它已经渲染完了,结果还是null, 上网找到一种方式说await nextTick()可以等待DOM渲染完毕,也是不行。
最终调度发现是由于这里的影响,由于上级的el-dialog 未设置为显示(渲染),所以子节点里面都不会被渲染。
isLoading.value = true;
修正后:, 这行代码显示isLoading.value = true;放在它前面即可。
const openDialog = asnyc (row: any) =>{ //省略...加载数据,其他处理 isLoading.value = true; consolog.log(tableRef.value); //此处会输出ok const elment = tableRef.value.$el; }; </script>
经过这次知道:
1.Dom元素未被渲染时,ref.是无法取得value的
2.onMounted 执行完后,通常都是渲染完后
3.await nextTick()可以选个渲染完毕
4.当你节点设置到v-if, 或节点未设置响应属性为显示时,则子元素也不会被渲染(这点比较容易忽略)
欢迎各位大佬指点