Below is my code using Bootstrap, Vue, and Axios:
SETUP:
*Please disregard the tab-contents in component_a
main.js
Vue.component('component_a', {
props: ['info'],
template: `<div>
// Component A template code here
}
Vue.component('component_b', {
data: () => {
return {
columns: null
}
},
props: ['info'],
template: `<div>
// Component B template code here
}
var app = new Vue({
el: '#app',
data () {
return {
info: [],
activeDisplay: "dashboard",
}
},
methods: {
// Methods for getting API data and setting active display
},
mounted () {
this.getData
}
})
main.html
<div v-if="activeDisplay === 'ep'">
<component_b @set-active-display="setActiveDisplay" :info="info"></component_b>
</div>
<div v-else-if="activeDisplay === 'dashboard'">
<dashboard></dashboard>
</div>
<div v-else-if="activeDisplay === 'activeEp'">
<component_a :info="info"></component_a>
</div>
<div v-else>
<dashboard></dashboard>
</div>
PROBLEM:
Description of the issue you are facing with updating the root instance object after an interaction with Component B.
Order of Operations:
Flow breakdown of how the events are processed by Vue and Axios to troubleshoot the issue.
EDIT1:
More insights into the debugging process and discovering the timing issue between Axios call completion and data update in Vue.
Final thoughts on needing to wait for Axios call to complete before displaying the data and seeking guidance on how to achieve this within Vue.