v-if = "загрузка" работает для md-progress-bar, но не работает ни для чего другого

Question

Ниже код, который я использую:

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

<script>
    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();
        xmlHttp.open("GET", url, false);
        xmlHttp.send(null);

        return JSON.parse(xmlHttp.responseText);
    }

</script>

v-if = "loading" на панели md-progress-bar показывает / скрывает отлично. Но добавление v-if = "loading" к НИЧЕМУ ПРОЧЕМ просто заставит элемент исчезнуть навсегда. Я попытался добавить v-if = "loading" ко многим другим типам элементов, и он не работает ни для одного из них! Я попытался удалить md-progress-bar и v-if по-прежнему не работает. Я не понимаю, что, черт возьми, я делаю неправильно. Я чувствую, что руководства, объясняющие v-if, были действительно простыми, но по какой-то причине это работает только для md-progress-bar ......

Answer 1

Хотите, чтобы исчезающие элементы отображались после завершения загрузки? Если это так:

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

Этот элемент будет отображаться только при loading === false. Чтобы элемент отображался после загрузки данных, используйте v-if="!loading"