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

Posted 2023-02-22

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

【英文标题】：HTML Tags containing Vue.js v-if and v-for directives flash at loading

【发布时间】：2017-06-10 08:49:57

【问题描述】：

我使用 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="[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：

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="[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>

【问题讨论】：

你应该使用承诺。

【参考方案1】：

使用 v-cloak 会解决的。

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

【讨论】：

感谢您的回答。这个我已经试过了（对不起，我忘了准确），我又试了一次，它不起作用。

尝试创建 JS Fiddle。

我误读了文档。使用v-cloak确实有效。谢谢！

完成。不过我需要15个声望。然后你会看到它。

【参考方案2】：

你不应该变量：loading一开始就为真：

data: 
    emailAddress: '',
    loading: true,
    success: false,
    errors: []
,

【讨论】：

不，它仅在用户单击<input type="submit"> 时加载。抱歉，我忘记了 storeSubscriber() 方法中的一行。