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.

tony19 · Accepted Answer · 2022-07-16 00:25:22Z

1

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.

edited Jul 16, 2022 at 0:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 17, 2017 at 12:40

Matt

44.1k6 gold badges105 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component prop value is undefined when accessing from template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related