0

al recargar mi aplicación me salen la variables como lo indica la imagen {{variable}}, y despues me sale la información normal, a mi parecer se mira feo es normal eso? gracias

introducir la descripción de la imagen aquí

2
  • 1
    No, no es normal, pero sin ver código no podemos ayudar mucho.
    – Shaz
    el 16 may. 2018 a las 4:09
  • Puedes evitar que se muestre el dom de vue utilizando v-cloak como se indica en la documentación: vuejs.org/v2/api/#v-cloak
    – Xerif
    el 16 may. 2018 a las 10:10

2 respuestas 2

1

Para corregir ese detalle debes hacer uso de la propiedad v-text; vas a hacer el acomodo de tu código de la siguiente manera

Este es el acomodo original que se hace, sin embargo se presenta el problema de que por unos segundos se ve la sintáxis de las dobles llaves

EJEMPLO(Te mostraré como hacerlo mediante un ejemplo para que solo lo adaptes a tus necesidades)

<ul v-for="a in heros">
   <li>{{ a.name }}</li>
   <li>{{ a.poder }}</li>
   <li>{{ a.nivel }}</li>
 </ul>

Debes ahora hacer uso de la directiva v-text, cambiando tu código de la siguiente manera

<ul v-for="a in heros">
   <li v-text="a.name"></li>
   <li v-text="a.poder"></li>
   <li v-text="a.nivel"></li>
 </ul>

Como puedes notar gracias a la directiva v-text los valores se cargan inmediantamente con el elemento del DOM por lo cual ese error de presnetación que mencionas desaparecerá

0
0

Para evitar que se muestren la llaves te puedes apoyar en v-cloak junto con css, como se indica en la documentación de Vue.

Declaramos la regla css:

[v-cloak] { display: none }

Y en el elemento de nuestra instancia de Vue añadimos la directiva `v-cloak

<div id="app" v-cloak>
  {{ message }}
</div>

Esto lo que hará es que se oculte el contenido hasta que la instancia de Vue este lista.

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.