包含Vue.js v-if和v-for指令的HTML标签在加载时会闪烁 [英] HTML Tags containing Vue.js v-if and v-for directives flash at loading

问题描述

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

I use Vue.js to send data to a basic and very simple API that subscribes an e-mail address to a newsletter via the form below and to display some messages (state and errors).

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

I use in particularly the directives v-if and v-for to display the errors and two messages. The thing is when the page is loading, those two paragraph elements and the unordered list element "flash" until the page is fully loaded or until the Vue.js instance is mounted.

我做错了吗?这是常见问题吗?我能做些什么来防止所有这些元素在加载时闪烁?

Am I doing it wrong? Is this a common issue? Is there anything I can do to prevent all those elements to flash at loading ?

谢谢.

这是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="[e-mail]" 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:

And here's the 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="[e-mail]" 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>

推荐答案

使用 v-cloak 即可解决.

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

这篇关于包含Vue.js v-if和v-for指令的HTML标签在加载时会闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！