websocket + vuejs: स्क्रीन झिलमिलाहट, दृश्य मूंछ कोड

Question

मैंने websockets, और vuejs का उपयोग करके एक वेब-ऐप बनाया है।

डोम में मैं vuejs द्वारा प्रबंधित डेटा पर लूप करना चाहता हूं। वेबसाइकिल कनेक्शन स्थापित होने के बाद डेटा को बाद में टाइमलाइन में सेट किया गया है और डेटा प्राप्त हुआ है।

उस बिंदु तक (लगभग 0.5 सेकंड), आप साइट पर स्वयं के लिए मूंछ कोड देख सकते हैं, फिर इसे झिलमिलाहट और वास्तविक डेटा जोड़ना देखें।

मैं ViewModel, बनाते समय WebSocket कनेक्शन से डेटा प्राप्त, इस तरह:

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

क्या मैं पहले से ही पृष्ठ लोड पर ViewModels आरंभ किया गया था की कोशिश की, और बाद में डेटा सेट:

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

WebSocket की onMessage घटना में:

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

समस्या यह है कि, अभी भी देरी है, जब तक कि vm intialized नहीं है। अनुक्रम इस तरह है:

पृष्ठ लोड -> दिखाई मूंछें कोड -> मूंछें कोड छिपा हुआ है, क्योंकि डेटा एक खाली वस्तु पर सेट है -> वास्तविक डेटा के बाद यह WebSocket द्वारा प्राप्त है दिखाया गया है

कोई भी विचार/उस मामले पर सर्वोत्तम प्रथाओं?

Answer 1

मैं जब तक मैं एपीआई दस्तावेज़ पढ़ ही समस्या है। यहां v-cloak directives का लिंक है!

HTML:

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

सीएसएस:

[v-cloak] {display: none} 

Answer 2

दंडवीस की टिप्पणी के आधार पर, मैंने डीओएम की दृश्यता को टॉगल करने के लिए डीओएम, और v-class="hidden: !done" में एक "छिपी हुई कक्षा" (display: none) जोड़ा। done व्यूमोडेल के डेटा में एक प्रमुख-मूल्य जोड़ी है।

HTML:

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

जावास्क्रिप्ट:

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