CODEWITHSUNDEEP
typescriptvue.jsvue-componentelement-ui
Anonymous Creator
Anonymous Creator

Reputation: 3819

Element UI Tree Data not updating with Vue

I have created following vue component.

Following code is not updating data when I update after ajax response.

Is there any specific method I need to apply after updating data.

I am using class based vue cli 3 components. It is not giving any error also. Just data is not updating.

Is there any method we need to use for vue reactivity to update the data or mounted event don't work?

Even if I give empty array as children, Name is not updating.

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

Upvotes: 3

Views: 2266

Answers (1)

Len Joseph
Len Joseph

Reputation: 1458

So to fix the issue, make axios call async and then load on a created hook, using

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

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

This will populate the response data prior to the virtual DOM mounting.

Upvotes: 2

Related Questions