typescript - Element UI Tree Verileri Vue ile güncellenmiyor

Aşağıdaki Vue bileşenini oluşturdum.

Aşağıdaki kod, ajax yanıtından sonra güncellediğimde verileri güncellemiyor.

Verileri güncelledikten sonra uygulamam gereken özel bir yöntem var mı?

Sınıf tabanlı Vue CLI 3 bileşenlerini kullanıyorum. Herhangi bir hata da vermiyor. Sadece veriler güncellenmiyor.

Vue reaktivitesinin verileri güncellemesi veya mounted olayı çalışmaması için kullanmamız gereken herhangi bir yöntem var mı?

Çocuk olarak boş dizi verseğim bile, Name güncellenmiyor.

<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>

Cevap #1

Bu nedenle sorunu çözmek için, axios çağrısını async yapın ve ardından bir created hook içinde yükleyin, kullanarak

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

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

Bu, sanal DOM monte edilmeden önce yanıt verilerini dolduracaktır.