Question

我创建了以下vue组件。

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

更新数据后，是否需要应用任何特定方法。

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

我们是否需要使用任何方法来进行Vue反应以更新数据或安装的事件不起作用？

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

<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调用async，然后使用

将其加载到创建的钩子上

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

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

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

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

1 个答案: