Nuxt Js Event Fires Twice

Question

I am using Nuxt js SSR for an app that am build, I installed Vue Event plugin but when i emit an event it runs twice at the listener. Created hook runs twice too.

Modules am using: Axios, Auth, Toast

Child Component

methods: {
  initPlaylist(songs) {
    console.log(songs)
  }
},
mounted () {
  this.$events.$on('playAll', data => {
    this.initPlaylist(data.songs) //runs twice
  })
}

Parent Component

method () {
    playAll (songs) {
      this.$events.$emit('playAll', songs)
  }
 }

How can i resolve this issues guys? I need your help.

`it runs twice at the listener. Created hook runs twice` sounds like there are two child component instances. — Sphinx, Aug 24 '18 at 20:08
@Sphinx i don't know how that is possible but i just have one child component with the listener — Mbengchan, Aug 25 '18 at 21:33
i have store actions that i dispatch to fetch data, when i navigate to page this store actions are dispatched twice because in my network area i see two request from same component. Maybe if i solve this it will fix the event listener — Mbengchan, Aug 25 '18 at 21:35

score 5 · Accepted Answer · answered Dec 19 '18 at 13:13

Maybe you have to call that parent's method on client side only.

you can write code like this to prevent emit on server side:

methods: {
  playAll(songs) {
    if (process.server) return

    this.$events.$emit('playAll', songs)
  }
}

or do not call playAll method on server side. (eg: created, mounted...)

score 1 · Answer 2 · edited Dec 10 '21 at 18:45

1

You need to off that event first before.

this.$events.$off("playAll");
this.$events.$on('playAll', data => {
    this.initPlaylist(data.songs) //runs twice
})

edited Dec 10 '21 at 18:45

Raffobaffo

2,806
9
22

answered Dec 10 '21 at 12:50

Dhara Bhalala

224
1
5

Nuxt Js Event Fires Twice

2 Answers2