vuejs variable in html attribute

Question

So I am trying to set the src of an element to a js variable and its just not working. I have tried a few ways and I cannot get it to work. Here is one way

<source src="{{ this.show.podcastUrl }}" type="audio/mpeg">

I also tried

<source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">

And

<source :src="{{ this.show.podcastUrl }}" type="audio/mpeg">

What am I doing wrong? Here is my component

<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            {{ this.show.name }}
            <div class="pull-right">
                {{ this.show.number }}
            </div>
        </div>
        <div class="panel-body">
            <ul>
                <li>Air Date: </li>
                <li>
                    <audio controls>
                        <source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">
                    </audio>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
    export default {
        mounted() {
            console.log(this.show);
        },

        props: {
            show: {
                type: Object,
                required: true
            }
        }
    }
</script>

Show us your vue.js component code. Also, the this keyword should not be required. — XCS
– XCS, Commented Dec 22, 2016 at 18:59
There is an interpolation error.This is correct <source :src="show.podcastUrl" type="audio/mpeg">.So you don't need the mustaches into binding directive. — Belmin Bedak
– Belmin Bedak, Commented Dec 22, 2016 at 19:26

Belmin Bedak · Accepted Answer · 2016-12-22 19:32:43Z

69

It's because you are using mustaches into v-bind directive - which is not allowed.

Mustaches {{}} into VueJS are related to templating, v-bind is passed to JS - so mustaches as part of template engine are not allowed into the v-bind directive.

This should be correct way:

<source :src="show.podcastUrl" type="audio/mpeg">

Also this is not needed here.

answered Dec 22, 2016 at 19:32

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

vuejs variable in html attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related