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

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指令，但无法解决问题。

JSF问题的中心

解

在您的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-斗篷，它会解决。

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