Could you please guide me in the right direction if this question has already been asked before? I really hope it's not a duplicate.
I have a Vue application that is compiled using Webpack@NPM. In order to pass a property (roles) across all components, I am using a mixin. The property gets updated with an ajax call when the app is instantiated. However, the issue I'm facing is that the roles only update for the <Root> component and not for any others.
////////////////////////
// app.js
////////////////////////
// import
window.axios = require('axios')
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes.js'
// mixin
Vue.mixin({
data: function () {
return {
// the property in question
roles: [],
}
},
methods: {
getRoles: function() { //////////// this method updates the property.
// fetch
axios.get('/api/vcr/admin/roles')
// process
.then(response=>{
this.roles = response.data.data;
})
// error handling
.catch(error=>{
this.toast(error.response.data.message);
})
},
},
});
// router
const router = new VueRouter({
mode: 'history',
routes: routes,
});
// app
const app = new Vue({
el: '#app',
components: { App: require('./views/App').default },
router,
base: '/saas/vcr/admin',
created: function() { ////////////// I update it here
this.getRoles();
}
});
////////////////////////
// Foo.vue
////////////////////////
<script>
export default {
mounted: function() {
console.log(this.roles) ////// returns an empty array
}
}
</script>
Is there a way to make the roles property reactive throughout all components?