While I was working on a project, I found myself in a tricky situation.(You can find the project here)
I needed to find a way to share data between two components, but the data was to small to be stored in Vuex and passing it through the components would've cluttered things up.
After some research, I've found exactly what I was looking for: Vue.observable().
To put it simple, it makes an object reactive.
This can be used to our advantage: if the object that is shared between 2 components is modified by the component A, the changes will be reflected in component B(and vice versa).
As you can notice, the Dashboard consists of multiple cards: History, VAT, Documents.
Now, I'd kindly ask you to focus your attention on the
The behaviour I expect is that every time the user clicks on a row, a modal will be opened and will show the proper information about that row.
My approach to this problem is to create two separate components, one which will display the rows and one which will contain the modal.
Now the following question arises: How does the
HistoryModal component know when a row has been clicked?
Well, let's see how
Vue.observable can help us.
I hope this article was able to shed a light on some similar issues you might have faced or simply to illustrate how powerful Vue.js is.
Thank you for reading!