vue用api获取直接赋值的数组为什么没有渲染在前端
2018-08-16 16:14
260 查看
通过vux绑定的panel组件渲染前端
[code]<panel :list="list" :type="type"></panel>
[code]export default { data () { return { type: '5', list: [] } }, }
[code]submit () { back.ChargeRec(this.params).then((response) => { if (this.params.page <= response.data.pages) { var sets = this.list if (response.data !== undefined) { for (let i = alsize; i < response.data.size; i++) { let groupinfo = {} let ingroup = [] ingroup.other = response.data.record[i].power ingroup.date = response.data.record[i].time groupinfo.title =response.data.record[i].cost groupinfo.src = 'https://timgsa.baidu.com/20041_IBI.png' groupinfo.desc =response.data.record[i].duration groupinfo.meta = ingroup sets[i] = groupinfo } } this.list = sets console.log(this.list) }) }
其中我panel所需要的数据是以这样的方式传递至panel之中,
然而数据并未渲染在前端。
同时,控制台打印出来的this.list显示已经拿到数据了。
最后师兄研究了很久,在vue官方文档中发现如下内容:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
举个例子:
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 |
为了解决第一类问题,以下两种方式都可以实现和
vm.items[indexOfItem] = newValue相同的效果,同时也将触发状态更新:
// Vue.set Vue.set(vm.items, indexOfItem, newValue) |
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) |
你也可以使用 vm.$set
实例方法,该方法是全局方法
Vue.set的一个别名:
vm.$set(vm.items, indexOfItem, newValue) |
为了解决第二类问题,你可以使用
splice:
vm.items.splice(newLength) |
根据上方所得,我之前将sets的指针直接指向this.list,所进行的数据填充是在list直接填充,而vue不会对变化的数组进行响应。因此进行如下改变:
[code]//var sets = this.list var sets = this.list.slice(0) //改为此行阅读更多
相关文章推荐
- 直接给vue数组赋值,无法渲染到页面
- vue数组操作不触发前端重新渲染
- vue 数组和对象不能直接赋值情况和解决方法
- vue 数组和对象不能直接赋值情况和解决方法(推荐)
- highcharts图表易错篇:前端通过string.split()得到的array数组直接赋值给series内data前需要做什么
- 为什么直接修改数组长度或设置数组项的索引时,Vue不能检测到数组的变动?
- 为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?
- 【vue.js】直接给数组赋值,vue.js不能检测到数组变化
- 特别注意:Delphi数组的赋值,SetLength没有作用
- 前端调取C# api 接口 下载excel,页面上直接下载的那种。看图5手拼模板,动态数据。
- 为什么推荐使用npm安装Vue,而不是直接在HTML中引入vue.js
- vue数组中数据变化但是视图没有更新解决方案
- vue2.0+elementui 兼容ie以及使用部分内容没有渲染成功
- 如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- 字符数组没赋值时为什么是屯屯屯屯屯屯屯屯屯
- Vue循环数组改变其中某一项的属性,视图不会重新渲染
- vue渲染页面,获取不到元素
- 再点击showmessage的ok按钮为什么没有返回登入窗口而是直接进入了主窗口?????
- 为什么我的iPhone4s用pp助手一键越狱前三步都对,最后完成的时候进度条满了却没有成功的提示,直接退出了?
- 两个同样的数组a和b。无法直接赋值:a=b; 变通一法