问题描述
公司要做个数据看板,因为在项目中应用到了dataV,在使用的过程中,发现dataV的组件的数据,若是来自自己定义的常量数据,数据可以正常显示在组件中。但当数据来自于axios调用后台数据获取,明明数据已经获取过来了,并且已经将数据赋值给组件上了,但组件上就是没有展示出新数据。
原因分析
认真查看dataV官网指南,发现上面有这样的信息。
原来dataV框架中不具备改变vue的data数据的能力,dataV中的组件props不是深度(deep)监听,所以只更新axios方式获取的数据是不行的,需要对整个组件更新一个新对象。
解决方法
在axios获取到数据,将数据更新到组件的data数据后,需要给组件重新赋值一个新的对象,这样才能够使组件显示新的数据。
生成新对象的方式:this.xxxProps = {...this.xxxProps}。
<style>
export default {
data () {
return {
config: {
……
data: [],
}
}
},
created() {
// 初始化数据
this.initData()
},
methods:{
async initData(){
......
this.config.data = response.data.list
//重新生成一个新的对象
this.config={...this.config}
}
}
}
</style>
示例
示例1:环形图,调用后台的数据,数据不刷新问题
示例2:轮播表,调用后台数据,数据没有更
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)