javascript - Impedir que Vue.js muestre corchetes en clientes lentos

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo oculto la sintaxis de VueJS mientras se carga la página? 10 respuestas

Acabo de hacer mi primera aplicación Vue.js y es increíble. El único problema que he tenido está relacionado con los valores de enlace en conexiones lentas.

Por ejemplo, en mi template tengo este código:

<div v-for="event in events">
    <div class="start_time">
        {{ event.start_time_formatted }}
    </div>
    <div class="icon_placeholder">
        <img v-bind:src="event.icon" alt="Sport Image" />
    </div>
    <div class="event_title">
        <a v-bind:href="event.url">
            {{ event.title }}
        </a>
    </div>
    <div class="button_placeholder">
        <a v-bind:href="event.url" class="btn btn-filled">
            Watch
        </a>
    </div>
</div>

Pero el problema es que obtengo este resultado hasta que se carguen todos los activos de mi sitio:

Por ejemplo, en el ejemplo de AngularJS , puede vincular valores utilizando directivas y evitar que se muestren los corchetes.

¿Cómo puedo lograr este efecto en Vue.js ?

Answer 1

v-text debería permitirle generar más angular-ish, y v-cloak puede ayudarlo a ocultar el contenido de la plantilla hasta que finalice la compilación para situaciones en las que necesite etiquetas de bigote.