Creating a new Vue instance with <code>new Vue()
is referred to as a vue instance, also known as vm
If you are working within constraints, I believe your approach is reasonable. There are a few alternatives that you can consider:
- One option is to create an event bus (which essentially functions as a vue instance) to manage shared events. This approach allows you to avoid delving deep into components but might introduce additional complexity. You can find more information at https://alligator.io/vuejs/global-event-bus/
- Another alternative is to render this as a page with the 2 vue instances as components inside a parent component. This setup enables the parent component to handle the state and pass it down to the child components. The primary advantage of this method is its simplicity in adding extra functionality.
In both scenarios, you would end up implementing something like this in the map:
map.on('click', e => emit('mapClick', e.feature));
Subsequently, in your component, listen for the mapClick either on the event bus if you opt for route 1 or in the parent container component if you choose route 2
I hope this explanation proves helpful. Best of luck!
Illustrative example of a Parent component where the sidepanel emits:
sidepanel = Vue.component('sidepanel')
map = Vue.component('map')
parentComponent = Vue.component('parent', {
components: { map, sidepanel },
template: `
<div>
<map @mapClick="handleMapClick" :dataAsProp="someData"></map>
<sidepanel @userClicked="handleUserClick" :dataAsProp="someData"/>
</div>
`,
data() {
return { someData: [] }
},
methods: {
handleMapClick(event, data) {
// Handle your update here, save data, etc
},
handleUserClick(event, data) {
// Handle your update here, save data, etc
}
}
})