Hyperlink not printing in Vue.js template, but just string works fine

Question

When I print attrib.link it works fine,

<div v-for="attrib in attributes">
 {{ attrib.link }}
</div>

but when I do

<div v-for="attrib in attributes">
  <a target='_blank' href={{ attrib.link }} style="color: #880000">{{ attrib.file }}</a>
</div>

I am getting error saying "Invalid character error": String contains invalid character.

Answer 1

For Vue 2, you could use either

<a target='_blank' v-bind:href="attrib.link" style="color:#880000">{{ attrib.file }}</a>

or

<a target='_blank' :href="attrib.link" style="color:#880000">{{ attrib.file }}</a>

Answer 2

Please use

v-bind:href='attrib.link'

or

:href='attrib.link'