Vuetable-2: DOM not updating after API call

[PrimozRome]

I am calling my api in created() hook and it returns the data but DOM of the table not updated...

Here is my template:

<template>
  <div>
    <vuetable 
      ref="vuetable"
      pagination-path=""
      :api-mode="false"
      :fields="['name', 'email', 'birthdate']"
      :data="tableData"
      :css="css">
    </vuetable>
    <vuetable-pagination ref="pagination"></vuetable-pagination>
  </div>
</template>

  data: function () {
    return {
      tableData: []
    }
  },
  async created () {
    try {
      let response = await this.$axios.get('/users', {})
      this.tableData = response.data.data
    } catch (e) {
      // error here
    }
  }

If I wrap tableData in <pre>{{ tableData }}</pre> instead of above <vuetable> then I see that tableData is being fetched okay. Why is the table not being redrawn when tableData is fetched in in the created() function?

[ratiw]

I don't know much about async/await, but the way you use it looks suspicious to me.

You should try normal Promise handling using then and catch first and see if it works.

[PrimozRome]

Tried the old way too .then() and .catch() and same result.

Async-await is built on top of promise so async-wait is the same as doing .then() and .catch() ... I checked on the Vue.js forum and they said I am doing it ok.

[cristijora]

This seems to be an issue with vuetable. The data is not updated if you update it even without any async stuff https://codesandbox.io/s/o5xo7k91lz

[cristijora]

@PrimozRome you could use setData method
https://codesandbox.io/s/o5xo7k91lz
this.$refs.vuetable.setData(data.data)

As a side note, not sure if vuetable is your best option to go if you set the data manually. Vuetable was built to integrate very well with paginated data returned from server.

[NickAmbrosio]

@cristijora Even after you set the new data set, how do you go about updating the fields at the same time?
Example:

this.$nextTick( () => {
          self.$refs.vuetable.fields = self.config.table.fields
          self.$refs.vuetable.setData(self.config.table.data)
        })

Is this possible?

[NickAmbrosio]

In response to my previous comment above.

I was able to set a custom refresh function in my VueTable component to update both the
tableFields and data using the following:

refresh() {
  let self = this
   this.$nextTick( () => {
          self.$refs.vuetable.tableFields = self.config.table.fields
          self.$refs.vuetable.setData(self.config.table.data)
    })
}