Cannot get URL from Vue

Question

I have this iframe: <iframe src={{videoCodes}}></iframe> and the following js:

var app = new Vue({
    el: '#app',
    data: {
        videoCodes: "https://www.youtube.com/embed/Ok_v3b7S2_Y"
    },
    methods: {

    }
})

But i cannot get videoCodes from Vue and put it into the iframe url. Help?

tony19 · Accepted Answer · 2022-07-15 22:59:23Z

2

You should not bind a dynamic value to a HTML Attribute like this. The double braces or mustache syntax is only for outputting reactive data to the page, not to bind with an attribute. For that, you need to use a special directive in Vue called the "v-bind". More info: Vue.js API. After the change, the template(HTML) should look like this:

<!-- ...... -->
<iframe v-bind:src="videoCodes"></iframe>

edited Jul 15, 2022 at 22:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 3, 2021 at 15:08

shrihankp

5003 silver badges14 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 01:03:06Z

2

When using variables as attributes of elements, you need to use v-bind as this: v-bind:src="videoCodes" or as a shorthand :src="videoCodes"

Docs: https://v2.vuejs.org/v2/api/#v-bind

edited Jul 15, 2022 at 1:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 3, 2021 at 15:04

MoPaMo

6949 silver badges28 bronze badges

Comments

proghasan · Accepted Answer · 2021-02-03 15:12:40Z

0

You need to bind attribute.

You can try:

<iframe v-bind:src="videoCodes"></iframe>

answered Feb 3, 2021 at 15:12

proghasan

4253 silver badges20 bronze badges

Collectives™ on Stack Overflow

Cannot get URL from Vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related