Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新

菜鸟0号 发布于 2017/09/06 17:17
阅读 1K+
收藏 0

Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新,filter,和变异方法都试过了,好像都不行,看网上有说是重复实例化vue的原因,但是不太明白。

要实现的是,点击触发but()方法,然后ajax获取数据,用v-for循环渲染出来。现在的问题是,第一次拿到数据可以正常渲染,当第二次触发方法时,ajax重新获取到新数据,vue中的data也已经改变了,但是页面上没改变。没弄懂怎么回事。

加载中
0
潇潇程序缘
潇潇程序缘

声明一个全局变量来接返回来的数组

0
wiskey007
wiskey007

vue的对象全局定义吧 ,别在ajax的回调函数里面定义vue对象

0
soldier杨
soldier杨
直接修改数组内部的值,是不会触发vue的视图更新的,你可以试试set方法
0
m
magiclogy

请你插入代码的时候用编辑器的插入代码段功能,不然别人没法复制。

首先你需要理解这段代码的含义

var example1 = new Vue({
    el: "#shipList",
    ....
});

因为你没有指定component,所以Vue会读取#shipList元素的html,作为模板编译。你第二次调用的时候,#shipList元素是Vue渲染后的结果(所以v-for啦之类的东西都没了),自然永远不会变化。

大概要改成这样

var example = undefined;
function but() {
......
if (example === undefined) {
    example = new Vue(....)
} else {
    Object.assign(example.data, data)
}
返回顶部
顶部