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!


Log in to reply