Vue+dataV:调用后台数据,数据赋值成功,但是组件上的数据更新失败

446 阅读1分钟

原因分析:在查看datav官方文档发现,

     状态更新
     避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里
     组件props均未设置deep监听,刷新props时,请直接生成新的props对象,(基础数据类型除          外),或完成赋值操作后使用ES6拓展运算符生成新的props对象  (this.someProps{...this.someProps})

原来dataV框架中不具备改变vue的data数据的能力,dataV中的组件props不是深度(deep)监听,所以只更新axios方式获取的数据是不行的,需要对整个组件更新一个新对象。

解决方法

在axios获取到数据,将数据更新到组件的data数据后,需要给组件重新赋值一个新的对象,这样才能够使组件显示新的数据。

生成新对象的方式:this.xxxProps = {...this.xxxProps}。

实例

export default {
    data () {
      return {
        config: {
          ……
          data: [],
        }
      }
    },
    created() {
    //  初始化数据
     this.initData()
    },
    methods:{
      async initData(){
        this.config.data = response.data.list
        //重新生成一个新的对象
        this.config={...this.config}
      }
    }
  }