HTML 包含 Vue.js v-if 和 v-for 指令的标签在加载时闪烁

Question

我使用 Vue.js 将数据发送到一个基本且非常简单的 API，它通过下面的表格 将电子邮件地址订阅到时事通讯 并显示一些消息（状态和错误）。

我特别使用指令 v-if 和 v-for 来显示错误和两条消息。问题是当页面加载时，这两个段落元素和无序列表元素 "flash" 直到页面完全加载或直到 Vue.js 实例被挂载。

我做错了吗？这是一个普遍的问题吗？我能做些什么来防止所有这些元素在加载时闪烁吗？

提前致谢。

这是HTML：

<div id="subscribe-to-newsletter">
    <form v-on:submit.prevent="storeSubscriber" novalidate>
        <label for="email-address">E-mail address</label>
            <input type="email" name="email_address" id="email-address" placeholder="exemple@nomdedomaine.fr" v-model="emailAddress">
            <input type="submit" name="submit" value="Rester informé">
    </form>

    <p v-if="success">Thank you, we will keep you updated</p>

    <p v-if="loading">Loading</p>

    <ul v-for="error in errors.email_address">
        <li v-text="error"></li>
    </ul>
</div>

这里是 JavaScript:

const subscribe = new Vue({
    el: '#subscribe-to-newsletter',

    data: {
        emailAddress: '',
        loading: false,
        success: false,
        errors: []
    },

    methods: {
        storeSubscriber() {
            subscribe.success = false;
            subscribe.errors = [];
            subscribe.loading = true;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/api/subscriber', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    subscribe.loading = false;

                    if (this.status == 200) {
                        subscribe.success = true;
                    } else {
                        subscribe.errors = JSON.parse(xhr.responseText);
                    }
                }
            }

            xhr.send(encodeURI('email_address=' + subscribe.emailAddress));
        },
    }
})

编辑

我尝试使用 v-cloak 指令，但没有解决问题。

JSFiddle of the problem

解决方案

将此添加到您的 CSS

[v-cloak] {
    display: none;
}

这是新的 HTML：

<div id="subscribe-to-newsletter">
    <form v-on:submit.prevent="storeSubscriber" novalidate>
        <label for="email-address">E-mail address</label>
            <input type="email" name="email_address" id="email-address" placeholder="exemple@nomdedomaine.fr" v-model="emailAddress">
            <input type="submit" name="submit" value="Rester informé">
    </form>

    <p v-if="success" v-cloak>Thank you, we will keep you updated</p>

    <p v-if="loading" v-cloak>Loading</p>

    <ul v-for="error in errors.email_address" v-cloak>
        <li v-text="error"></li>
    </ul>
</div>

Answer 1

用v-cloak就可以解决

https://vuejs.org/v2/api/#v-cloak

Answer 2

你不应该变量：loading在开始时是真的：

data: {
    emailAddress: '',
    loading: true,
    success: false,
    errors: []
},