包含 Vue.js vif 和 vfor 指令的 HTML 标签在加载时flash

我用Vue.js将数据发送到一个基本且非常简单的API，该API将邮箱地址订阅到下面的新闻稿via，并显示一些消息(状态和错误).

我特别使用指令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));
        },
    }
})

Edit

我试图使用v-Clope指令，但它并没有解决问题

JSFiddle of the problem

Solution

将此添加到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>