CODEWITHSUNDEEP
vue.js
kawnah
kawnah

Reputation: 3414

VueJS - using mustache template strings inside href attribute

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

Mustache inside of href

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
      >

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

  2.   <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?

Upvotes: 1

Views: 4442

Answers (6)

Mayrcon Marlon
Mayrcon Marlon

Reputation: 11

In my case this works for me:

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

I have a laravel route and used this.

Upvotes: 1

Alec1017
Alec1017

Reputation: 119

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>

Upvotes: 0

dagalti
dagalti

Reputation: 1956

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>

Upvotes: 0

Дмитро Іванов
Дмитро Іванов

Reputation: 1031

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

Upvotes: 1

Radu Diță
Radu Diță

Reputation: 14191

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 {
   ....
   }
}

Upvotes: 0

Lassi Uosukainen
Lassi Uosukainen

Reputation: 1688

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.

Upvotes: 4

Related Questions