vuejs variable in html attribute
<p>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</p>

<pre><code>&lt;source src="{{ this.show.podcastUrl }}" type="audio/mpeg"&gt;
</code></pre>

<p>I also tried</p>

<pre><code>&lt;source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg"&gt;
</code></pre>

<p>And</p>

<pre><code>&lt;source :src="{{ this.show.podcastUrl }}" type="audio/mpeg"&gt;
</code></pre>

<p>What am I doing wrong? Here is my component</p>

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


&lt;script&gt;
    export default {
        mounted() {
            console.log(this.show);
        },

        props: {
            show: {
                type: Object,
                required: true
            }
        }
    }
&lt;/script&gt;
</code></pre>