Cannot read property 'player' of undefined on Nuxt

[redxtech]

Cannot read property 'player' of undefined on Nuxt

[redxtech]

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

[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.

[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.

@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.

[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 :)

[Vusal317]

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