Vue.js Create Menu Querying Database
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations by an applications filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu. My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout. From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present