Vue3 - Uncaught TypeError: n2 is not a function - emit

394 Views Asked by At

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:

enter image description here

I tried both @click and @click.prevent. Do you have any suggestions? Thanks.

0

There are 0 best solutions below