v-if="loading" 适用于 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>

md-progress-bar 上的

v-if="loading" 显示/隐藏非常好。但是将 v-if="loading" 添加到 ANYTHING ELSE 只会导致元素永远消失。我尝试将 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"