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

Question

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

我特别使用指令v-if和v-for来显示错误和两条消息。问题是当页面加载时，那两个段落元素和无序列表元素“闪烁”直到页面完全加载或者直到装入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: []
},