CODEWITHSUNDEEP
vue.js
Aximili
Aximili

Reputation: 29484

How to bind to attribute in Vue JS?

I got this error

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

on this line

<a href="/Library/@Model.Username/{{myVueData.Id}}">

It works in Angular 1. How do you do it in Vue?

Upvotes: 23

Views: 47743

Answers (5)

Leonardo Savio
Leonardo Savio

Reputation: 431

Just complementing ... solve the interpolation error (simple solution, I am Junior front-end developer): Example post object in a loop:

  • instead of
    <a href="{{post.buttonLinkExt}}">
  • try this way
    <a v-bind:href="post.buttonLinkExt">

Upvotes: 5

Patryk
Patryk

Reputation: 338

Found in Google this topic when searching $attrib. Question don't specify what value is used (maybe not defined before) For ANY parent attribute or to FILTER it, use something like that:

<template>
  <component
    is="div"
    v-bind="$attrs"
    class="bg-light-gray"
  >
  EXAMPLE
  </component>
</template>

This instruct to create specific, dynamic and context aware, wrapper:

  • v-bind="$attrs" instruct to take all sended params. Not needed to declare as param object in script.
  • Work even with valid html attribute like class
  • example above mix static class with parent and join it. Use ternary operator (x=1?x:y) to choose proper one.
  • bonus: by "is" you can dynamically set tag like header or secion instead of div
  • $attrs can be binded to any tag in component so this easily enable simple transmission for one tag dynamic attributes like you define class for <input /> but wrapper and actions are added in component

Source with description: https://youtu.be/7lpemgMhi0k?t=1307

Upvotes: 2

Ismoil Shifoev
Ismoil Shifoev

Reputation: 6011

Use javascript code inside v-bind (or shortcut ":") :

:href="'/Library/@Model.Username' + myVueData.Id"

and

:id="'/Library/@Model.Username' + myVueData.Id"

Update Answer

Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:

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

Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url. You may have noticed this achieves the same result as an attribute interpolation using href="{{url}}": that is correct, and in fact, attribute interpolations are translated into v-bind bindings internally.

Upvotes: 4

code4jhon
code4jhon

Reputation: 6044

you can either use the shorthand : or v-bind

<div>
    <img v-bind:src="linkAddress">
</div>

new Vue({
        el: '#app',
        data: {
            linkAddress: 'http://i3.kym-cdn.com/photos/images/newsfeed/001/217/729/f9a.jpg'
        }
});

or for when you need more than just binding an attribute you can also do: 

    new Vue({
            el: '#app',
            data: {
                finishedLink: '<a href="http://google.com"> Google </a>' 
            }
    });

Upvotes: 1

CodinCat
CodinCat

Reputation: 15924

In your template:

<a :href="href">

And you put href in data:

new Vue({
  // ...
  data: {
    href: 'your link'
  }
})

Or use a computed property: 

new Vue({
  // ...
  computed: {
    href () {
      return '/foo' + this.someValue + '/bar'
    }
  }
})

Upvotes: 31

Related Questions