websocket + vuejs: sfarfallio dello schermo, codice visibile del baffo

Question

Ho creato un'app Web tramite websockets e vuejs.

Nel DOM voglio eseguire il loop dei dati gestiti da vuejs. I dati tuttavia vengono impostati successivamente nella timeline, dopo che è stata stabilita una connessione web-socket e che i dati sono stati ricevuti.

Fino a quel punto (circa 0,5 secondi), è possibile visualizzare il codice baffo per vuejs sul sito stesso, quindi vederlo sfarfallio e aggiungere i dati reali.

creo il ViewModel, quando si ricevono dati dalla connessione websocket, in questo modo:

onMessage: function (e) { 
    new Vue({ 
     el: '#messages', 
     data: { 
      messages: e.data 
     } 
    }); 
} 

Quello che ho già provato è stato l'inizializzazione dei ViewModels al caricamento della pagina, ed impostare i dati di seguito:

var vms = { 
    messages: new Vue({ 
     el: '#messages', 
     data: { 
      messages: { 
      } 
     } 
    }) 
}; 

In onMessage caso di websocket:

var vm = vms.messages; 
vm.$data = { messages: body }; 

Il problema è, tuttavia, che c'è ancora un ritardo, finché il vm non viene inizializzato. La sequenza è come questo:

page del carico -> codice baffi visibile -> codice di baffi è nascosto, perché i dati è impostato su un oggetto vuoto -> dati reali è mostrato dopo che è ricevuto dal websocket

Tutte le idee/migliori pratiche in materia?

Answer 1

Ho lo stesso problema fino a quando ho letto la documentazione delle API. Ecco il link per v-cloak directives!

HTML:

<div id="demo" v-cloak><p>{{ test }}</p></div> 

CSS:

[v-cloak] {display: none} 

Answer 2

Sulla base del commento di dandavis, ho aggiunto una classe "nascosta" (display: none) al DOM e v-class="hidden: !done", per attivare la visibilità del DOM. done è una coppia valore-chiave nei dati di ViewModel.

HTML:

<div class="message hidden" v-repeat="messages" v-class="hidden: !done">...</div> 

Javascript:

onMessage: function (e) { 
    new Vue({ 
     el: '#messages', 
     data: { 
      messages: e.data, 
      done: true 
     } 
    }); 
}