使用v-for指令渲染界面,数组数据更新后不渲染新数据问题
初学vue,只是想要假数据来模拟一下目的:实现点击这个按钮就会在页面加载新数据实现:直接在数组里,改变数组(push函数)来达到重新渲染页面的目的1.页面v-for渲染代码<div class="cmt-item" v-for="item in comList":key><div class="cmt-title">{{ item.time }}</div>&l
·
初学vue,只是想要假数据来模拟一下
目的:实现点击这个按钮就会在页面加载新数据
实现:直接在数组里,改变数组(push函数)来达到重新渲染页面的目的
1.页面v-for渲染代码
<div class="cmt-item" v-for="item in comList":key>
<div class="cmt-title">
{{ item.time }}
</div>
<div class="cmt-body">
{{ item.body}}
</div>
2.给按钮添加事件后
第一遍出错代码
methods:{
getCom()
{
var newComList=[
{ time:"第五楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"玩梗无聊"},
{ time:"第六楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"有点意思"},
{ time:"第七楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"快来对暗号"}
];
this.comList.push(newComList); //comList data中父数组
newComList="";
}
}
}
3.点击加载后页面数据没有更新,利用工具查看数据是否存入父数组中
我们可以看到数据已经存到data中的数组中去了,但是仔细观察发现,后存进去的数据明显数据结构不对,所以这次渲染失败的原因可以确定是存储格式有问题,发现了问题所在就可以开始解决了
重新更改代码:
methods:{
getCom()
{
var newComList=[
{ time:"第五楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"玩梗无聊"},
{ time:"第六楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"有点意思"},
{ time:"第七楼 用户:匿名用户 发表时间:2020-08-20 16:11",
body:"快来对暗号"}
];
for(var j=0;j<3;j++)
{
this.comList.push(newComList[j])
}
}
}
}
4.运行成功,渲染界面成功,用工具看一下数据
结构一致
作为小白,我觉得我最缺少的能力就是如何分析出问题出在哪里,怎么造成的,如何解决
共勉
更多推荐
已为社区贡献2条内容
所有评论(0)