vue掉坑之旅(1) —— v-for 指令渲染数据失效

博客讲述了作者在使用Vue的v-for指令渲染表格数据时遇到的问题。尽管数据正确接收,但表格无法正确显示。经过排查,作者发现当只有单条数据时,v-for渲染失效,而增加数据后问题解决。文章留下悬念,表示将进一步研究。
摘要由CSDN通过智能技术生成

一、v-for指令

1. v-for 作用

对数组进行遍历,通过特殊语法,对列表、表格或下拉框渲染数据;

Tips:类似foreach、for的作用,语法跟foreach类似
2. v-for 语法

根据官方教程,我们可以看到:
v-for

二、我是怎么掉坑的

1. 情景
    在前台我拿到了后台返回的数据,想要对其表格进行渲染;
2. 为什么坑?
    通过 Chrome 开发工具,能够清楚的看到数据的返回以及相应变量接收是没问题的,那为什么表格数据出不来呢?
小心翼翼的排查过程:

  • 首先在确定了数据返回和接收无问题(自己在控制台打印了具体对象的某个属性),开始怀疑自己写的 v-for 语法是否有误,于是吭哧吭哧跑到官网去复制,然后在刷新页面,好吧,想象的效果并没有出来;
  • 第二次怀疑,难道是绑定对象的属性有问题?基于这个我开始检查,打开调试工具,在数据返回后设置了断点,点开返回数据中的第0项,仔细的跟
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值