Vue component prop value is undefined when accessing from template

Question

I created 2 Vue components:

Vue.component('vimeo', {
    template: '<iframe src="https://player.vimeo.com/video/' + this.videoId + '" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
    props: ['videoId']
});

Vue.component('videos', {
    template: '<div id="videos">' + 
                '<div v-for="videoId in videoIds">' +
                    '<vimeo :video-id="videoId"></vimeo>' +
                '</div>' +
              '</div>',
    computed: {
        videoIds: function() {
            return store.state.videoIds;
        }
    }
});

However, the this.videoId is always undefined in the 'vimeo' component template. If I change the template to:

<h1>{{ videoId }}</h1>

the prop value can be displayed properly.

I have searched the internet for solutions to this, but unfortunately, I have not got any.

Matt Matt · Accepted Answer · 2017-05-17T12:40:03

The code you have is basically trying to use this.videoId at the time of the template definition, before any components have been initialized.

Instead what you'll have to do is bind the videoId value so that it is translated at render time. I would do this with a computed property since you need to concatenate the vimeo URL prefix.

Something like:

computed: {
  videoUrl() { return 'https://player.vimeo.com/video/' + this.videoId; }
},
template: '<iframe :src="videoUrl" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'

Note the colon in :src for the dynamic binding. See the docs for more info on this.

Vue component prop value is undefined when accessing from template

1 Answers