Cannot get URL from Vue

user_14939576 0
Viewed 83

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?

vue.js html javascript
3 Answers

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

user_129070880

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>
user_135463830

You need to bind attribute.

You can try:

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