V-cloak не работает в vue.js?

На моей странице есть 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>

Как это исправить?

Ответ 1

Я исправил эту проблему, переписав 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>

Ответ 2

Просто включите этот код в свой файл css

[v-cloak] { display:none; }

http://vuejs.org/api/#v-cloak

Пример использования:

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

Эта директива останется на элементе до тех пор, пока соответствующий Vue экземпляр завершает компиляцию. В сочетании с правилами CSS, такими как [v-cloak] {display: none}, эта директива может использоваться для скрытия не скомпилированные привязки усов до тех пор, пока экземпляр Vue не будет готов.

http://vuejs.org/api/#v-cloak

Ответ 3

Vue.js - 2.3.4, я добавил 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

Ответ 4

К сожалению, вышеприведенные 2 ответа не помогли мне, так как проблема была чем-то другим. Поскольку эти вопросы появляются в Google на # 1, я решил поделиться своим решением.

Если вы определили правило CSS 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;
}