Emitting non-boolean value from child component and adding second attribute in parent component
-
I’m using a vue component called vue-plyr. I use the player in a child component.
My vue-plyr child component emits three values to the parent via the mounted() hook:
this.player.on('playing', () => this.$emit('playing')), this.player.on('pause', () => this.$emit('paused')), this.player.on('timeupdate', () => this.$emit('timeupdate', this.player.currentTime))
The playing and paused values are boolean, and I can receive them in the parent like this:
<player ref="pauseMe" @playing="playing(item)" @paused="paused(item)" ></player>
But when I emit timeupdate, it emits a numeric value instead of a boolean value. For some reason that I’m not grasping, the only way I can find to read that value successfully in the parent is like this:
<player ref="pauseMe" @timeupdate="currentTime" @playing="playing(item)" @paused="paused(item)" ></player>
When I do that, it calls the currentTime method just fine and passes through the inferred value from the $emit. But if I change currentTime to currentTime() or currentTime(value), the parent fails to receive the value from the child.
The problem I have is that I need to add a second attribute in the parent to use in the currentTime method, like this:
@timeupdate = "currentTime(value, secondValue)"
but when I try to do that, as I said, value doesn’t pick up the implied value from the child. Instead it returns undefined.
How can I specify the value returned from the child so that I can also add a second value of my own when calling currentTime()?
-
@omgwalt
Try@timeupdate = "currentTime($event, secondValue)
-
@tof06 That did the trick. Thank you!