Cannot read property 'player' of undefined on Nuxt

[ghost]

 <vue-plyr ref='plyr' >
  <div class="plyr__video-embed" @click='(e)=>e.stopPropagation()'>
    <iframe :src="`https://www.youtube.com/embed/${youtube_id}iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1`"
                allowfullscreen allowtransparency allow="autoplay">
    </iframe>
  </div>
</vue-plyr>

computed: {
  player () {
    return this.$refs.plyr.player
  }
}

what am i missing?

[jacobedawson]

From what I understand, it's not best practice to 1.) use refs to access child components and 2.) depend on refs being available in computed properties: https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

That might have something to do with it - I've found that refs is not even available in the mounted hook on the first render, so Nuxt might be having an issue with that. I still haven't worked out the best way to grab a reference to the player instance.

[ghost]

@jacobedawson: Thanks for the answer. It's in the same component and I'm following the doc

The goal is to play the player programmatically

[kjetilge]

I'm having the same problem in Vue SPA. This is what I had to do to initialize the player with a video:

<template>

  <vue-plyr ref="plyr" id="video-player">
    <video controls>
      <source src type="video/mp4"/>
    </video>
  </vue-plyr>

</template>
<script>
  export default {
    data () {
      return {
        player: {},
        playerInitialized: false
      }
    },
    updated: function () {
      // INITIALIZE PLYR PLAYER WITH A VIDEO
      this.$nextTick(function () {
        const videoplayer = document.getElementById("video-player");
        if(!this.playerInitialized) { // If player not initialized
          videoplayer.addEventListener('ready', event => {
            this.playerInitialized = true
            this.player = this.$refs.plyr.player

            if(!this.player.source) {
              this.player.source = {
                type: 'video',
                title: 'Example title',
                sources: [{
                  src: "example-video-url.mp4",
                  type: 'video/mp4',
                  size: 1080,
                }]
              }
            }
          })
        }
      }),
    methods: {
      // Load videos programatically
      loadVideo (videoUrl) {
        this.player.source = {
          type: 'video',
          title: 'Example title',
          sources: [{
            src: videoUrl,
            type: 'video/mp4',
            size: 1080,
          }]
        }
      }
    }
    }
  </script>

If any one knows how to do this in a better way, please let me know.

[redxtech]

That seems like a reasonable solution. I can probably build that into the next release to fix this sort of issue.

[rafaelacb]

Hi, is there any solution for this??

[redxtech]

@rafaelacb (and others): Sorry for the delays, I've been swamped. I should be completely free to look at this in a few weeks. I appreciate your understanding.

[mangowi]

Hi!, @rafaelacb and everyone.

How did you guys solve this issue?

Thank you in advance :)

[redxtech]

I think that using nextTick to access the ref is the best solution for now. If anyone has any other questions feel free to open a new issue.

[kennybuc]

I think that using nextTick to access the ref is the best solution for now. If anyone has any other questions feel free to open a new issue.

This does not work for me. The player is still undefined.

[Vusal317]

This is work for me await this.$nextTick(() => { setTimeout(() => { console.log(this.$refs.plyr.player) }, 500) });