websocket + vuejs: migotanie ekranu, widoczny kod wąsy

Question

Zbudowałem aplikację internetową za pomocą websockets i vuejs.

W DOM chcę pętli nad danymi obsługiwanymi przez vuejs. Dane są jednak ustawiane później na osi czasu, po nawiązaniu połączenia internetowego i odebraniu danych.

Do tego momentu (około 0,5 sekundy) można zobaczyć kod wąsy dla vuejs na stronie, a następnie zobaczyć migotanie i dodawanie rzeczywistych danych.

ja stworzyć ViewModel, podczas odbierania danych z połączenia websocket, tak:

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

Co Próbowałem już było inicjowanie ViewModels na stronie obciążenia, i ustawić dane później:

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

W przypadku onMessage z websocket:

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

Problem polega jednak na tym, że nadal występuje opóźnienie, dopóki nie nastąpi inicjalizacja vm. Sekwencja jest tak:

strona obciążenia -> widoczny kod wąsy -> Kod wąsy jest ukryta, ponieważ dane są ustawione na pustym obiekcie -> prawdziwe dane są wyświetlane po jego otrzymaniu przez websocket

Wszelkie pomysły/najlepsze praktyki w tej sprawie?

Answer 1

Mam ten sam problem, dopóki nie przeczytałem doc API. Oto link do v-cloak directives!

HTML:

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

CSS:

[v-cloak] {display: none} 

Answer 2

Na podstawie komentarza dandavis, dodałem do klasy DOM i v-class="hidden: !done" "ukrytą" klasę (display: none), aby przełączyć widoczność DOM. done to para klucz-wartość w danych modelu 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 
     } 
    }); 
}