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

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

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

我做错了吗？这是常见问题吗？有什么办法可以防止所有这些元素在加载时闪烁？

先感谢您。

这是HTML：

    

        E-mail address
            
            
    

    
Thank you, we will keep you updated

    
Loading

    

        

    

这是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：

    

        E-mail address
            
            
    

    
Thank you, we will keep you updated

    
Loading

    

        

    

M U.. 7

使用v-斗篷，它会解决。

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

使用v-斗篷，它会解决。

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