title: VueJS - using mustache template strings inside href attribute
body: <p>How do you put in a mustache inside a href attribute in the context of vue?</p>
  
  <p>These are all the answers I found that I've been trying to implement into my code</p>
  
  <p><a href="https://stackoverflow.com/questions/11218075/mustache-inside-of-href">Mustache inside of href</a></p>
  
  <p><a href="https://stackoverflow.com/questions/40899532/how-to-pass-a-value-from-vue-data-to-href">How to pass a value from Vue data to href?</a></p>
  
  <p><a href="https://www.reddit.com/r/vuejs/comments/4ws0px/why_using_vbindhref_rather_than_a_href_string_a/" rel="nofollow noreferrer">https://www.reddit.com/r/vuejs/comments/4ws0px/why_using_vbindhref_rather_than_a_href_string_a/</a></p>
  
  <p>My code sample right now is:</p>
  
  <pre><code>...
  &lt;ul&gt;
          &lt;li v-for="menuItems in MenuItems" class="nav-item"&gt;
            &lt;a
              class="nav-link"
              v-bind:href="{{ &amp; menuItems.url}}"
              aria-label=“blah”
              &gt;{{ menuItems.text }}&lt;/a
            &gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  ...
  export default {
    name: 'Nav',
    data: {
      menuItems: [
        {text: 'Item 1', url: '/item-1'},
        {text: 'Item 2', url: '/item-2'},
        {text: 'Item 3', url: '/item-3'},
        {text: 'Item 4', url: '/item-4'}
      ]
    }
  }
  ...
  </code></pre>
  
  <p>I tried:</p>
  
  <p>1.</p>
  
  <pre><code>      &lt;a
          class="nav-link"
          v-bind:href="{{ &amp; menuItems.url}}"
          aria-label="blah"
          &gt;{{ menuItems.text }}&lt;/a
        &gt;
  </code></pre>
  
  <ol start="2">
  <li><pre><code>  &lt;a
      class="nav-link"
      v-bind:href="menuItems.url"
      aria-label="blah"
      &gt;{{ menuItems.text }}&lt;/a
    &gt;
  </code></pre></li>
  <li><pre><code>  &lt;a
      class="nav-link"
      v-bind:href="/menuItems.url/"
      aria-label="blah"
      &gt;{{ menuItems.text }}&lt;/a
    &gt;
  </code></pre></li>
  </ol>
  
  <p>I'm either getting:</p>
  
  <blockquote>
    <p>Errors compiling template:</p>
    
    <p>invalid expression: Unexpected token { in</p>
  
  <pre><code>{{ &amp; menuItems.url}}
  </code></pre>
    
    <p>Raw expression: v-bind:href="{{ &amp; menuItems.url}}"</p>
  </blockquote>
  
  <p>Or a completely empty <code>&lt;ul&gt;</code></p>
  
  <p>What am I doing wrong? How does this work?</p>