Search code examples
vue.jsdata-bindinghref

Binding data in href attibute - VueJS

I have problem with binding data in VueJS. In code below, user.name is working but user.id in href attribute is not.

<ul id="message-user-list">
  <li v-for="user in users">
    <a href="chat.php?user={{ user.id }}">{{ user.name }}</a>
  </li>
</ul>

I also tried this but it doesn't work:

<ul id="message-user-list">
  <li v-for="user in users">
    <a v-bind:href="chat.php?user={{ user.id }}">{{ user.name }}</a>
  </li>
</ul>

What do I do wrong? Help please.

Solution

  • Try it like this <a :href="'chat.php?user=' + user.id">{{ user.name }}</a>

    If you do v-bind: - vue takes everything in quotes for js