Estoy tratando de ocultar una determinada clase en la carga de la página. Los primeros dos textos no aparecen en la carga de la página, pero de alguna manera, el tercer texto parpadea en la carga de la página pero desaparece después de unos segundos ya que se cumplen las otras condiciones de las otras clases. Me gustaría que se ocultara al cargar la página, solo para que apareciera si se cumple la condición v-else-if .
Así es como se ve mi código:
<div class="row"> <div class="cxs12" v-if="this.result1 !== this.result2"> <p> text 1 </p> </div> <div class="cxs12" v-else-if="this.result"> <p> text 2 </p> </div> <div class="cxs12" id="unavailable" v-else-if="this.result === undefined"> <p> text 3 </p> </div> </div> this.result es el retorno de una llamada API. Ya intenté agregar v-cloak tanto en la plantilla como en el CSS, pero desafortunadamente no funciona. Tenga en cuenta que estoy usando Typescript y no Vue.js.
¿Alguna idea de lo que podría hacer para arreglar esto?
Puede intentar establecer otra condición en la row , tal vez algo como el siguiente fragmento si lo entiendo correctamente:
new Vue({ el: '#demo', data() { return { result: undefined, result1: '', result2: '', loading: false } }, methods: { apiCall() { this.loading = true setTimeout(()=> { this.result = 1 this.loading = false },2000) } }, mounted() { this.apiCall() } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="row" v-if="!loading"> <div class="cxs12" v-if="this.result1 !== this.result2"> <p> text 1 </p> </div> <div class="cxs12" v-else-if="this.result"> <p> text 2 </p> </div> <div class="cxs12" id="unavailable" v-else-if="this.result === undefined"> <p> text 3 </p> </div> </div> </div>