Hi all !
I have the following structure of components :
School -> MapBox -> StudentMap
School -> Institute -> Student
School : is just a wrapper (master component)
Institute : Is a CRUD for the institute from the database and has Student's children
Student : is a CRUD for the student
MapBox : Create a OpenStreetMap
StudentMap : Is there to construct the layer with informations with leaflet
I retrieve from the database Institutes which have Students
I know I should need to use Vuex store to have a perfect and clean share of the datas but I had only one week to develop the project and I don't master Vuex still.
The Student component is responsible to edit/delete itself, Institute is responsible to create student, and edit/delete itself. The School, receive the Institutes via laravel json which bind it in the View at the loading.
Whenever an Institute or Student is created/update/deleted, I added event that emits from child to parent to update the data (which is the opposite of what Vue allow but in this usecase I need to let the master component (School) be up-to-date to propagate to the other branch MapBox -> StudentMap.
I have a watcher for the institute / student in the StudentMap and it is triggered when I add new Institute / Student. But when I update / delete, Nothing happen.
I followed of course the good practice to be sure that Vue can catch the modification, like Vue.delete() and Vue.set() or arr.splice() I found thoses informations here (https://fr.vuejs.org/2016/02/06/common-gotchas/)
But Nothing is happening. I don't understand why the Vue propagate the informations when it's created. But not update / delete.
The code is too bit to be put here, but if the description is not clear enough, I created a gist with it all. (https://gist.github.com/dib258/467417e362e5cf6cdecfb839fb53de9e)
Thanks in advance for you help
Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.