Vue Async Data Initialization

by mgoetzke

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <component is="my-com"></component>
</div>

JavaScript

var com = {
  name: 'my-com',
  template: `<div><h1>test</h1>
  <p>{{locals}}</p>
  </div>`,
  data() {
    const locals = {}
    
    initLocals(locals)

    return {
      locals,
    }
  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

Vue.component(com.name, com
)

var demo = new Vue({
  el: '#demo',
  data: {
  }
})


async function initLocals(locals) {
  locals.text = 'first line (is still inside sync region)'
  await sleep(1)
  locals.someMore = 'after sleep (is NOT in same tick and thus lost)'

}