vue3,vant4的vant-cell组件for循环实现

本文分享了作者在使用Vue3的v-for循环vant-cell时遇到的问题,主要涉及到Ref数据类型和如何配合template标签正确设置默认内容。作者希望读者避免重复踩坑,尤其对于初学者有指导意义。
摘要由CSDN通过智能技术生成

写这篇文章在于帮助大家少踩我这个坑。

业务需要在vant中使用vue的v-for方法来循环生成vant-cell单元格,由于本人不是很会vue3,所以踩了不少坑,跟大家分享一下踩坑过程,大家莫笑,哈哈。

循环的数据类型定义为 const tableData = ref([])

刚开始我的思路是通过v-for直接循环就可以,如下图错误代码

由于是ref数据类型,所以tableData0后面添加了.value

调试看效果的时候,控制台打印tableData0数据咩有问题,也咩有任何的报错,页面就是不显示效果,看到官网组件的文档default

这个default就是用于自定义显示在单元格中的内容的,配合template使用

 该循环循环。用上template标签配合标识符使用,就可以正常v-for循环cell组件了,希望大家不要踩到我这个坑。因为技术不太好,官网文档也只是一笔带过,我卡了好久,希望大家不踩这个坑。

 

 

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值