CODEWITHSUNDEEP
vue.jsvuetify.js
Michael Mudge
Michael Mudge

Reputation: 439

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

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.

Upvotes: 3

Views: 15944

Answers (3)

Dimitar D.
Dimitar D.

Reputation: 205

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

Simply solved it using

:loading="!items.length"

Upvotes: 1

Nicanor Huaman Lima
Nicanor Huaman Lima

Reputation: 41

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;
  },
}

Upvotes: 4

Fab
Fab

Reputation: 4657

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

Upvotes: 12

Related Questions