元素 UI 树数据未使用 Vue 更新

Question

我创建了以下 vue 组件。

当我在 ajax 响应后更新时，以下代码没有更新数据。

更新数据后有什么具体的方法需要申请吗？

我正在使用基于 class 的 vue cli 3 组件。它也没有给出任何错误。只是数据没有更新。

我们是否需要使用任何方法来使 vue 反应性更新数据或挂载的事件不起作用？

即使我将空数组作为 children，名称也不会更新。

<template>
      <el-tree :data="MyData" :props="defaultProps"></el-tree>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ElemUI from 'element-ui';
import axios from 'axios';

@Component({
  components: {
    ElTree: ElemUI.Tree,
  },
})
export default class In extends Vue {
  public MyData: any = [
          {
            label: 'Data',
            children: [],
          },
        ];
  public defaultProps: any = {
    children: 'children',
    label: 'label',
  };
  public mounted() {
    axios
      .post('https://localhost:44375/api/Graph', {
        query: `{
                myData {
                    name,
                    innerData {
                    name
                    }
                  }
                }`,
      })
      .then((response) => {
        this.MyData = [
          {
            label: 'Another Data',
            children: Response.data.data.AnotherArrayData
          },
        ];
      });
  }
}
</script>

Answer 1

因此，要解决此问题，请使用

让 axios 调用异步，然后加载到创建的挂钩上

methods: {
   async fetchDataMethod() {
      await axios...
  }
}`

`created() {
   this.fetchDataMethod();
}

这将在虚拟 DOM 安装之前填充响应数据。

元素 UI 树数据未使用 Vue 更新

Element UI Tree Data not updating with Vue

typescript

vue.js

vue-component

element-ui