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?
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'
}
}
})
hrefs need to be computed in a same pattern, use methodsgetHref (id) { return '/foo/' + id }
Just complementing ... solve the interpolation error (simple solution, I am Junior front-end developer): Example post object in a loop:
<a href="{{post.buttonLinkExt}}">
<a v-bind:href="post.buttonLinkExt">
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.
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. classheader 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 componentSource with description: https://youtu.be/7lpemgMhi0k?t=1307
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>'
}
});
