v-cloak no funciona en vue.js?

Question

Hay un div en mi página que muestra el mensaje de error. Cuando actualizo la página, aparecerá durante un tiempo y luego desaparecerá. Agregué v-cloak pero no funciona.

este es el código, showErrorMsg es falso

<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>

¿Cómo arreglar esto?

Answer 1

Desafortunadamente, las 2 respuestas anteriores no funcionaron para mí ya que el problema era otra cosa. Debido a que esta pregunta aparece como número 1 en Google, pensé que compartiría mi solución.

Si ha definido una regla css de visualización en algún lugar que sea más específico, romperá la funcionalidad de v-cloak. ¡Sin embargo! No se desespere, simplemente copie esto en su archivo CSS y ¡funcionará!

[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;
}

Answer 2

Me enfrenté al mismo problema, y ​​se debió a una propiedad de display conflictiva en mi div . Para resolverlo, utilicé la bandera !important en el [v-cloak] como:

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

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

Answer 3

Solo incluye este código en tu archivo css

[v-cloak] { display:none; }

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

Ejemplo de uso:

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

Esta directiva permanecerá en el elemento hasta que la instancia de Vue asociada termine la compilación. Combinada con las reglas de CSS como [v-cloak] {display: none}, esta directiva se puede usar para ocultar los enlaces de bigotes sin compilar hasta que la instancia de Vue esté lista.

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

Answer 4

Solucioné este problema reescribiendo el css.

agregar una clase en el archivo css:

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

entonces el 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>

Answer 5

v-cloak permanecerá en el elemento hasta que la instancia de Vue asociada finalice la compilación. Esta directiva se puede usar para ocultar los enlaces de bigotes no compilados hasta que la instancia de Vue esté lista.

ejemplo de nexladder

https://nexladder.com/vuejs-tutorial/vuejs-v-cloak-directive

Answer 6

Vue.js - 2.3.4 , agregué el v-cloak en el contenedor de la aplicación, agregando esto en el contenedor primario, encuentro que no estás repitiendo el código manteniéndolo SECO .

HTML:

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

CSS:

[v-cloak] {
 display:none;
}

Ejemplo de Codepen:

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