vue 循环对象,数据更新,但是视图未刷新

来源:互联网 发布:红米2移动版网络解锁 编辑:程序博客网 时间:2024/06/08 19:18

今天需求碰到一个分组列表,按照以往的习惯,直接就想到了循环遍历对象,然后对象每一个key就是组标题,然后对应value为数组,再循环到组内渲染。
设想很完美,实现起来也不是很难。但是后来我把数据库数据放多之后,准备测试分页加载更多是否成功的时候,发现出现问题了,视图竟然没有刷新,可是数据明明刷新了呀。然后立马查看官方文档,找到了原因跟解决方案。
文档地址
文档中明确说了:Vue 不能检测对象属性的添加或删除
按照文档中来修改了我的code,整体思路相同,在这里贴出我的部分实现代码,如下:

//response.data.jclb 为获取到的服务器列表数据//vm.items为我需要视图显示的对象for (let i = 0; i < response.data.jclb.length; i++) {    if (vm.items[response.data.jclb[i].jcrq] === undefined) {        //属性为空,则创建        vm.items[response.data.jclb[i].jcrq] = []    }    //添加某一个组内的列表元素         vm.items[response.data.jclb[i].jcrq].push(response.data.jclb[i])    //下面四行代码就是为了解决视图没有刷新主要的实现代码    var key = response.data.jclb[i].jcrq    let ob = {}    ob[key] = vm.items[response.data.jclb[i].jcrq]    vm.items = Object.assign({}, vm.items, ob)}

先记录这点,以后碰到更详细的,再补充。又要去码砖了。。。。

原创粉丝点击