Элемент дерева данных элемента не обновляется с помощью Vue - PullRequest
Новая
       21

Элемент дерева данных элемента не обновляется с помощью Vue

3 голосов
/ 19 апреля 2019

Я создал следующий компонент vue.

Следующий код не обновляет данные при обновлении после ответа ajax.

Есть ли какой-либо конкретный метод, который мне нужно применить после обновления данных.

Я использую компоненты на основе классов vue cli 3.Это также не дает никакой ошибки.Просто данные не обновляются.

Есть ли какой-нибудь метод, который нам нужно использовать для реактивности vue для обновления данных, или смонтированное событие не работает?

Даже если я даю пустой массив как дочерний элемент, Name не обновляется. 

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

1 Ответ

2 голосов
/ 22 апреля 2019

Итак, чтобы решить проблему, заставьте axios вызвать async, а затем загрузить на созданный хук, используя 

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

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

Это заполнит данные ответа до виртуального монтирования DOM.

...