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?

Lassi Uosukainen · Accepted Answer · 2019-03-21 19:41:31Z

4

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.

answered Mar 21, 2019 at 19:41

Lassi Uosukainen

1,68815 silver badges22 bronze badges

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

1 Comment

user5481714 Over a year ago

Thank you for responding but both examples still don't work.

Дмитро Іванов · Accepted Answer · 2019-03-21 21:07:16Z

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

Mayrcon Marlon · Accepted Answer · 2020-12-18 15:09:01Z

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, 2020 at 15:09

Mayrcon Marlon

111 bronze badge

1 Comment

Gander Over a year ago

Please edit your answer to: improve code formatting , include an explaination of how this works and why it is solution of the problem? See How to Answer

Radu Diță · Accepted Answer · 2019-03-21 19:48:36Z

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, 2019 at 19:48

answered Mar 21, 2019 at 19:35

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

4 Comments

user5481714 Over a year ago

Thanks but it's still not working. I get no errors but it's an empty UL still.

Radu Diță Over a year ago

Are you updating menuItems from other sources?

user5481714 Over a year ago

I don't 100% understand what you're asking but this is all in it's own component.

user5481714 Over a year ago

Theres no data in the vue devtools

dagalti · Accepted Answer · 2019-03-22 02:36:52Z

0

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>

answered Mar 22, 2019 at 2:36

dagalti

1,9661 gold badge15 silver badges16 bronze badges

Comments

Alec1017 · Accepted Answer · 2019-03-22 03:24:13Z

0

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>

answered Mar 22, 2019 at 3:24

Alec1017

1196 bronze badges

Collectives™ on Stack Overflow

VueJS - using mustache template strings inside href attribute

6 Answers 6

1 Comment

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related