vue3.0 vant popup渲染不出来问题及解决

目录

• vue3.0 vant popup渲染不出来
• vue3中组件无法渲染成功
• 总结
@H_777_10@

vue3.0 vant popup渲染不出来

遇到这个问下，先检查看看是不是看着vant的2.x版本进行开发。

vant2.x版本代码如下：

van-popup  v-model="show"  closeable  posITion="bottom"  :style="{
 height: '30%' }
    "/>
    

vant3.x版本代码如下：

van-popup  v-model:show="show"  round  position="bottom"  :style="{
 height: '30%' }
    "/>
    

发现 v-model:show=“show”，v-model的时候多了个:show。

开发时还是得注意看插件的版本号是不是支持到vue3.x。

vant 3.x地址：https://vant-contrib.gitee.io/vant/next/#/zh-CN

vue3中组件无法渲染成功

TyPEError: Cannot read PRoperty ‘avatar‘ of undefined

做项目的时候，通过props传值传了对象到子组件，结果调用的时候一直报错说找不到对象中的某个属性(undefined)，但是我通过devtools查看的时候却可以在子组件中查找到这个对象的所有完整属性，说明这个对象已经传到子组件了，对象是没有问题的。

报错情况如下：

找了很久发现是在template中，我在根组件里添加了是否要显示的判断

div v-if="Object.keys(commentinfo).length != 0" class="comment-info">
    

但是括号的位置错了，一开始写成了如下的错误方式，所以导致了模版没办法渲染。

div v-if="Object.keys(commentinfo.length) != 0" class="comment-info">
    

计算机的报错原因有时候是不准确的，当整个页面都显示不出来的时候，也许可以看看根组件有无问题。

另外，对于自己不太熟悉的属性/写法，应该好好理解再三检查，刚开始接触新东西就是比较容易犯错。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• 解决VantUI popup 弹窗不弹出或无蒙层的问题
• vue中使用vant的Toast轻提示报错的解决
• @L_406_9@
• Vue3中使用vant的踩坑实战日记

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！