在我们使用better-scroll 的插件的时候,在涉及某些方面的时候,控制台会出现下面的报错:
[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined”
这大概意思就是:
[BScroll warn]:无法解析包装器DOM。Vue better-scroll
[Vue warn]:挂载钩子中的错误:" TypeError:无法读取未定义的属性’ children ’ "
当时我就在这个问题上纠结了好久,代码、逻辑都没错,最后我查了资料,想明白是为什么了,下面就跟大家说说:
先看错误代码:
<div v-if="change">
</div>
<div v-else ref="wrapper"></div>
因为我的用的是ref来获取div的,但是他总是报错找不到这个节点。
问题就出在v-if(v-else)这里,因为在mounted(挂载)函数执行时,我的change值在挂载时为false,所以该节点就不会被渲染出来,所以就找不到节点了。
而这时候我们可以将v-if(v-else)改为v-show就行了
正确代码如下:
<div v-if="change">
</div>
<div v-show="!change" ref="wrapper"></div>
因为两个只能渲染一个,所以v-show取 !change (真),也就是为true时渲染第二个div元素。
本文详细解析了在使用Vue与Better-scroll时遇到的DOM解析错误,并提供了解决方案,通过将v-if替换为v-show确保组件在挂载阶段能够正确找到DOM节点。
696

被折叠的 条评论
为什么被折叠?



