使用VusJS和Axios,子组件不会通过数据绑定进行更新

时间:2018-08-01 13:54:53

标签: mongoose vue.js axios

在父级的已安装下,我有一个函数调用:

this.getLevel()

方法下,我有一个对我的MongoDB进行Axios驱动的异步调用:

  async getLevel () {
    console.log('trying...');
    const response = await ProjectService.getLevel(this.$route.params.id);
    this.diagramData = response.data.level.startNodeData;
   // console.log(response.data.level.startNodeData);
  },

数据下,我有一个空数组,等待函数回调中的更新:

data () {

  return {
    diagramData: [],
  }
},

数据被绑定并发送到组件,如下所示:

 <NodeViewer v-bind:model-data="diagramData"  v-on:changed-selection="changedSelection" ></NodeViewer>

现在,在(组件)中,我有道具,如下所示:

 props: ["modelData"],  // accept model data as a parameter

我的问题是为什么如果我将JSON直接添加到 diagramData 中,子级将按预期进行更新而不会出现问题,但是当我在安装中使用async方法更新diagramData时,子级组件没有按预期更新?我不应该挂载异步呼叫吗?应该在另一个像创建的生命周期挂钩中吗?

1 个答案:

答案 0 :(得分:0)

好吧,就像使用JSON.parse转换异步回调一样简单:

this.diagramData = JSON.parse(response.data.level.startNodeData);

正在发送字符串而不是对象。希望这对其他人有帮助:)