v-cloak在vue.js中不起作用？

jogvjijk 于 2023-04-21 发布在 Vue.js

关注(0)|答案(7)|浏览(219)

在我的页面中有一个div，用于显示错误信息。当我刷新页面时，它会出现一段时间然后消失。我添加了v-cloak，但它不起作用。
这是代码，showErrorMsg为false

<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

如何解决这个问题？

vue.js

来源：https://stackoverflow.com/questions/34870926/v-cloak-does-not-work-in-vue-js

7条答案

按热度按时间

vbopmzt11#

只需将此代码包含到您的css文件中即可

[v-cloak] { display:none; }

https://vuejs.org/api/built-in-directives.html#v-cloak
使用示例：

<div class="xpto" v-cloak>
    Hello
</div>

该指令将保留在元素上，直到关联的Vue示例完成编译。结合CSS规则，如[v-cloak] { display：none }，该指令可用于隐藏未编译的mustache绑定，直到Vue示例准备就绪。

赞(0）回复(0）举报 2023-04-21

vuv7lop32#

我也遇到了同样的问题，这是由于我的div上的display属性冲突。为了解决这个问题，我在[v-cloak]上使用了!important标志：

[v-cloak] {
    display: none !important;
}

.my-class {
    display: table-cell;
}

赞(0）回复(0）举报 2023-04-21

wkftcu5l3#

Vue.js - 2.3.4，我在app容器上添加了v-cloak，在父容器上添加了这个，我发现你没有重复代码保持DRY。
HTML：

<div id="app" v-cloak>
 Anything inside gets the v-cloak
</div>

CSS：

[v-cloak] {
 display:none;
}

Codepen示例：

https://codepen.io/Frontend/pen/RjoKQm

赞(0）回复(0）举报 2023-04-21

qlckcl4x4#

我通过重写CSS并在CSS文件中添加一个类来修复这个问题

CSS：

[v-cloak] .v-cloak--hidden{
  display: none;
}

HTML：

<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

赞(0）回复(0）举报 2023-04-21

5uzkadbs5#

如果你使用CDN来获取Vue并使用Bootstrap CSS，那么原因可能是你在body标签的底部加载了Bootstrap CSS，将其移回head标签对我来说是有效的。请确保你保持按钮中的vueJS文件不变。

<HTML>
<head>
  All link and script tag here
</head>
<body> 
  <div id='app' v-cloak>
    {{ something }}
  </div>
  <script src="app.js"></script>
</body>

赞(0）回复(0）举报 2023-04-21

yhuiod9q6#

我有一个场景，我有一个搜索表单和下面，结果与v-if块，等待提交。
我把v-if改成了v-show，这似乎有帮助。我尝试了v-cloak--hidden类，但也不起作用（v-cloak已经被样式化为display: none）。（在processForm方法中），将显示设置为阻止并显示所有结果。

processForm() {
      // reset page number on new search          
      document.getElementById("data-container").style.display="block"
      this.pageNumber = 1;
      this.remoteRequest();
  },

如果没有这个变化，在一个完整的页面刷新我可以 * 仍然 * 看到胡子来了。这里是完整的HTML页面，简化。

<div id="app" v-cloak>
      <main class="main-section">
        <form method="POST" class="p-4 text-center" @submit.prevent="processForm">
            <button type="submit" name="button" class="btn btn-primary">
               Find
            </button>
        </form>

        <!-- Results  -->
        <div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
           <div class="row">
              <div class="col">
                 <div id="recordsContainer" v-show="totalInScreen > 0">
                    <div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
                      <div class="card-body">
                        <div class="row">
                          <div class="col">
                             <h2 class="doctor-name">{{ result.doct_name }}</h2>
                             <h2 class="doctor-bio">Bio</h2>
                             <p>{{result.doct_bio}}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
      </main>
  </div>

赞(0）回复(0）举报 2023-04-21

yrefmtwq7#

不幸的是，上面的两个答案对我不起作用，因为问题是别的。由于这个问题在谷歌上排名第一，我想我应该分享我的解决方案。
如果你在某个地方定义了一个更具体的显示css规则，它将破坏v-cloak功能。但是！不要绝望-只需将其复制到你的CSS文件中，它就会工作！

[v-cloak] .v-cloak--block {
  display: block!important;
}

[v-cloak] .v-cloak--inline {
  display: inline!important;
}

[v-cloak] .v-cloak--inlineBlock {
  display: inline-block!important;
}

[v-cloak] .v-cloak--hidden {
  display: none!important;
}

[v-cloak] .v-cloak--invisible {
  visibility: hidden!important;
}

.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
  display: none!important;
}

赞(0）回复(0）举报 2023-04-21

我来回答

v-cloak在vue.js中不起作用？

7条答案

相关问题

热门标签

最新问答