title: vuejs variable in html attribute
body: <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>