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

Question

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.

Fab · Accepted Answer · 2019-10-17 08:01:10Z

12

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

answered Oct 17, 2019 at 8:01

Fab

4,6572 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Mudge Over a year ago

elements is a computed property, so I could set the loading variable to true before that, but then it returns this.elements, so not sure where to set it back to false.

Fab Over a year ago

How do you load data? Isn't it http request? Could you please share the code of the computed property?

kissu · Accepted Answer · 2021-02-26 11:58:36Z

4

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

edited Feb 26, 2021 at 11:58

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Feb 25, 2021 at 23:11

Nicanor Huaman Lima

411 bronze badge

Comments

Dimitar D. · Accepted Answer · 2021-05-28 01:07:53Z

1

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

Simply solved it using

:loading="!items.length"

answered May 28, 2021 at 1:07

Dimitar D.

2053 silver badges12 bronze badges

2 Comments

Fab Over a year ago

That's ok, but you must be sure that your http request always returns at least one element

sha Over a year ago

it doesnt work when you dont have any data in your list . actulayy when your list is empty

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related