Published 8 months ago by dib258
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