I want to emit an event from the footer (in App.vue with router-view) to a component inside the router-view.
In the footer
<div
v-for="(timeInterval, index) in store.timeIntervals"
:key="timeInterval.id"
@click="setTimeInterval(timeInterval.id)"
>
<img
:src="timeIntervalImages[index]"
class="w-8 h-8 mr-4"
:class="timeInterval.id == selectedTimeIntervalId ? 'opacity-100' : 'opacity-50'"
/>
</div>
This is the function that is called when click a button on footer:
methods: {
setTimeInterval: function (timeIntervalId: number) {
this.store.storeSelectedTimeInterval(timeIntervalId);
this.selectedTimeIntervalId = timeIntervalId;
this.emitter.emit('refreshUnits');
},
}
This is inside the component that needs to run function:
mounted() {
this.emitter.on('refreshUnits', this.loadUnits());
},
But I get an error and a warning:
I tried both @click and @click.prevent. Do you have any suggestions? Thanks.
