vuetify 2.0 v-data-table loading prop not disabling after loading

2
votes

In my app I am using Vuetify 2.0s v-data-table to display a table of data. I am trying to implement a loading linear-progress-bar while waiting for my elements to load. I am following the documentation , and when I add the props loading and loading-text="bla", it shows the loading text and linear-progress-bar, but after the elements load in the linear-progress-bar does not go away.

I have tried setting loading="elements", which then only shows the loading text and not the linear progress bar. I have also tried :loading="elements" which disables the entire loading feature.

<v-data-table
  :items="elements"
  :headers="elementsHeaders"
  :search="elementsSearch"
  hide-default-footer
  loading
  loading-text="Laden... even geduld aub"
>

I expect that with that code, when elements are loaded in that both the linear progress bar and loading text goes away.

3
vue.jsvuetify.js

3 Answers

8
votes

You should use a boolean variable with the loading prop (add it to your component data).

data() {
   return {
      myloadingvariable: false
   }
}

Set it to true before starting loading data and to false when data have been loaded.

<v-data-table :loading="myloadingvariable" loading-text="Laden... even geduld aub">
2
votes

Here is my solution

<v-data-table
  :items="elements"
  :headers="elementsHeaders"
  :search="elementsSearch"
  hide-default-footer
  :loading="loadTable"
  loading-text="Laden... even geduld aub"
>

data() {
   return {
    loadTable: true
   }
}

methods: {
  async listar() {
    const res = await axios.get('/especies');
    this.items = res.data;
    this.loadTable= false;
  },
}
1
votes

I know it's an old topic, but I was searching for same thing just now.

Simply solved it using

:loading="!items.length"