Solution 1 :

Do you want the disappearing elements to show when loading is finished? If so:

<div v-if="loading">
  <h1> Hi </h1>

This element will only be shown when loading === false. For an element to be shown when data is done loading, use v-if="!loading"

Problem :

Below is the code I am using:

            <div v-if="loading">
                <h1> Hi </h1>
            <md-progress-bar md-mode="query" v-if="loading"></md-progress-bar>

    export default {
        name: "ordered-table",
        props: {
            tableHeaderColor: {
                type: String,
                default: ""
        data() {
            return {
                selected: [],
                files: getData(),
                loading: false
        methods: {
            getData: async function (event) {
                this.loading = true;

                this.files = await getData();

                this.loading = false;

    function getData() {
        var url = "http://localhost:4999/";
        var xmlHttp = new XMLHttpRequest();"GET", url, false);

        return JSON.parse(xmlHttp.responseText);


v-if=”loading” on the md-progress-bar shows/hides perfectly fine. But adding v-if=”loading” to ANYTHING ELSE just causes the element to disappear forever. I’ve tried adding v-if=”loading” to many other different types of elements and it doesn’t work for any of them! I tried deleting the md-progress-bar and v-if still doesn’t work. I don’t understand what the hell I am doing wrong. I feel like the guides explaining v-if have been really straightforward yet for some reason it only works for md-progress-bar……


Comment posted by Prikesh Savla

you can switch to v-show if you just wanna hide the element, but keep it in the DOM

Comment posted by Alex Wenger

i’m having the exact same issue with v-show lol

Comment posted by Alex Wenger

I have a refresh button that I click that pulls data from a database. I want to show a progress bar while the data is being retrieved and hide it when the data arrives.