[Vuejs]-Using asynchrnous operations related on state of another object

by

0👍

The only problem here is in async/await misundestanding. It’s just an syntax sugar on Promises, so your code equals this.

beforeCreated() {
  console.log('connecting')
  WebSocket.connect(...).then(() => {
    console.log('connected')
  });
}

So the beforeCreate hook exits on await line and Vue instance is going down on next hooks. So in this case you should not rely on Vue hooks. Instead, use Websocket event

async beforeCreated() {
  Websocket.on('open', () => {
    this.websocketIsOpened = true; // should present in data()
  });
  await WebSocket.connect(...)
},
template: `
...
<ChildComponent v-if="websocketIsOpened" />
or 
<ChildComponent v-bind="websocketIsOpened" />

In second variant you probably need an immediate watcher in child component on this prop to call Invoke method

Leave a comment