Within my Vue mounted function, I am in need of both an internal value referred to as foo and an external value known as bar.
Here is a snippet from myVue.js file --
//myVue.js
export var myVue = new Vue({
el: '#my-vue',
data: {
foo: null,
},
...
methods: {
asyncThatRequiresBothFooAndBar() {
}
},
mounted: async function () {
this.asyncThatRequiresBothFooAndBar();
},
beforeMount: function () {
this.foo = this.$el.attributes['foo-value'].value;
}
});
and within myMain.js entry point --
//myMain.js
import { myVue } from './myVue';
(async () => {
await asyncBar();
})();
The issue arises when Vue triggers the mounted hook before asyncBar completes its operation.
I attempted the following workaround in myMain.js --
//myMain.js
(async () => {
await asyncBar();
myVue.methods.asyncThatRequiresBothFooAndBar();
})();
Unfortunately, this resulted in a
Cannot read property 'asyncThatRequiresBothFooAndBar' of undefinedHence, my question is: How can I effectively synchronize Vue hooks with both internal and external dependencies?