`v-attr` with xlink namespace is not working

I tried to write a v-attr with an xlink:href property. Unfortunately, I got a warning:

[Vue warn]: Invalid expression. Generated function body: scope.href:'/svg/ico.svg#'+scope.option.icon

I had the following code, which according to the stack overflow link must have worked at some point:

<svg class="icon icon--{{ option.icon }}">
    <use v-attr="xlink:href: '/svg/ico.svg#' + option.icon">
</svg>

http://stackoverflow.com/questions/26811126/using-v-attr-with-attribute-that-contains-colon-xmlnshref-does-not-compile

One problem I’ve seen in so far is that the xlink Regex in the directives/attr.js doesn’t match. But even fixing that, I’m still getting the same error:

Line 2: var xlinkRE = /^xlink:/ should be var xlinkRE = /^xlink/

Or am I completely misunderstanding the issue?

[getsetbro]

I found in the docs that I can do this: <use v-bind="{'xlink:href':'#a'+item.name}"></use>

https://vuejs.org/v2/api/#v-bind

[yyx990803]

You need to wrap your xlink:href in quotes so that Vue doesn’t treat the colon as an argument separator:

<use v-attr="'xlink:href' : '/svg/ico.svg#' + option.icon">