列子
<span>{{test[0].ress}}</span>
this.axios.get('/list/1').then(res => {
this.test = res.data.data
this.test.map((val, index) => {
this.axios.get('/list/2').then(res => {
val.ress = res.data.data[0].name
this.test.push(val)
})
})
})
watch: {
test (val) {
this.$nextTick(() => {
this.test = val
})
}
}
解决
这里特别声明一下vue的数据更新方式,对于数组,vue只会在使用Array的原生方法更改数据后,才会更新视图而对于上面 val.ress = res.data.data[0].name
这样直接对this.test的子对象更改数据,并不会触发vue的响应更新
机制,因为vue的监听对象压根就不监听 这样的赋值方式
,查资料,网上找解决办法,终于眼前一亮
1.Vue只能使用如下数组方法,才能响应式更新视图:
push
pop
shift
unshift
splice
sort
reverse
this.axios.get('/list/1').then(res => {
let data = res.data.data
data.map((val, index) => {
this.axios.get('/list/2').then(res => {
val.ress = res.data.data[0].art_name
this.test.push(val)
})
})
})
你发现,视图更新了,恭喜你,也恭喜我,对自己又一次加了一点汽油,让我们更好的奔跑吧
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)