How to bind to attribute in Vue JS?

Question

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?

Answer 1

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