VueJS - using mustache template strings inside href attribute

Question

How do you put in a mustache inside a href attribute in the context of vue?

These are all the answers I found that I've been trying to implement into my code

How to pass a value from Vue data to href?

https://www.reddit.com/r/vuejs/comments/4ws0px/why_using_vbindhref_rather_than_a_href_string_a/

My code sample right now is:

...
<ul>
        <li v-for="menuItems in MenuItems" class="nav-item">
          <a
            class="nav-link"
            v-bind:href="{{ & menuItems.url}}"
            aria-label=“blah”
            >{{ menuItems.text }}</a
          >
        </li>
      </ul>
...
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'}
    ]
  }
}
...

I tried:

1.

      <a
        class="nav-link"
        v-bind:href="{{ & menuItems.url}}"
        aria-label="blah"
        >{{ menuItems.text }}</a
      >

  <a
    class="nav-link"
    v-bind:href="menuItems.url"
    aria-label="blah"
    >{{ menuItems.text }}</a
  >

  <a
    class="nav-link"
    v-bind:href="/menuItems.url/"
    aria-label="blah"
    >{{ menuItems.text }}</a
  >

I'm either getting:

Errors compiling template:

invalid expression: Unexpected token { in
{{ & menuItems.url}}
Raw expression: v-bind:href="{{ & menuItems.url}}"

Or a completely empty <ul>

What am I doing wrong? How does this work?

score 4 · Answer 1 · answered Mar 21 '19 at 19:41

None of the links that you linked are relevant to this situation assuming you are using the current VueJS version. Using double curly braces inside html attributes was used VueJS 1, however in VueJS 2 it was replaced with what is called v-bind. V-bind can be used in attributes with the two following ways which are functionally equivalent:

<a v-bind:href="url"></a>

and

<a :href="url"></a>

The moustache syntax with double curly braces works still inside the template, however not in attributes.

Thank you for responding but both examples still don't work. — kawnah, Mar 21 '19 at 19:44

Дмитро Іванов · Answer 2 · 2019-03-21T21:07:16.870

The correct variant for binding href is

v-bind:href="menuItem.url"

But your problem may be because of

v-for="menuItems in MenuItems"

You are trying to enumerate a MenuItems property, but you don't have such property in a component, you have menuItems. Try this

<li v-for="menuItem in menuItems">
    <a :href="menuItem.url">{{ menuItem.text }}</a>
</li>

You can also try changing

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'}
    ]
  }

into

data: function () {
    return {
        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'}
        ]
    }
  }

score 1 · Answer 3 · answered Dec 18 '20 at 15:09

1

In my case this works for me:

v-bind:href="/post/ + post.slug"

I have a laravel route and used this.

answered Dec 18 '20 at 15:09

Mayrcon Marlon

11
1

1

Please [edit] your answer to: improve code formatting , include an explaination of how this works and why it is solution of the problem? See [answer] – Gander Dec 18 '20 at 15:37

Radu Diță · Answer 4 · 2019-03-21T19:48:36.067

0

You have a typo in your v-for, you need menuItems, lower m

  <ul>
    <li v-for="menuItem in menuItems" class="nav-item">
      <a
        class="nav-link"
        v-bind:href="menuItem.url"
        aria-label=“blah”
        >{{ menuItem.text }}</a
      >
    </li>
  </ul>

Also change data to be a method

data () {
  return {
   ....
   }
}

edited Mar 21 '19 at 19:48

answered Mar 21 '19 at 19:35

Radu Diță

13,476
2
30
34

Thanks but it's still not working. I get no errors but it's an empty UL still. – kawnah Mar 21 '19 at 19:44
Are you updating menuItems from other sources? – Radu Diță Mar 21 '19 at 19:49
I don't 100% understand what you're asking but this is all in it's own component. – kawnah Mar 21 '19 at 20:06
Theres no data in the vue devtools – kawnah Mar 21 '19 at 20:17

score 0 · Answer 5 · answered Mar 22 '19 at 02:36

Below code is working. Codepen : https://codepen.io/anon/pen/bZQZdK

<ul>
        <li v-for="menuItem in menuItems" class="nav-item">
          <a class="nav-link"
            v-bind:href="menuItem.url"
            aria-label=“blah”>{{ menuItem.text }}</a>
        </li>
      </ul>

score 0 · Answer 6 · answered Mar 22 '19 at 03:24

Ive run into this issue in the past using nunjucks. Solution for me was to remove the v-bind from the href:

<li v-for="menuItems in MenuItems" class="nav-item">
      <a
        class="nav-link"
        href="{{ & menuItems.url}}"
        aria-label=“blah”
        >{{ menuItems.text }}</a
      >
    </li>

VueJS - using mustache template strings inside href attribute

6 Answers6

Linked