I am trying to use v-attr to add an attribute that contains a colon which is a delimiter for Vuejs key:value. It doesn't compile.
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink"
v-attr="xmlns:href: '#' + iconID"></use>
</svg>
I have also tried
<svg class="lego-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:href="#[[ iconID ]]"></use>
</svg>
Which has similar results.
You need to wrap your xlink:href in quotes so that Vue doesn't treat the colon as an argument separator (https://github.com/yyx990803/vue/issues/648)
<use v-attr="'xlink:href' : '#' + iconID">
I haven't used vue.js, but looking at the source for v-attr, it appears as if it is designed to handle xlink:href.
The trouble is your attribute is wrong. It should be xlink:href, not xmlns:href. Try:
<svg>
<use v-attr="xlink:href: '#' + iconID"></use>
</svg>
(If you are embedding SVG in an HTML page, you shouldn't need the xmlns:xlink="http://www.w3.org/1999/xlink").
[Vue warn]: Invalid expression. Generated function body: scope.href:'/svg/ico.svg#'+scope.option.iconWith the new version of vue.js, you can use
<use v-bind:href="'#icon-' + iconId"></use>
or even
<use :href="'#icon-' + iconId"></use>
Vue.js seems to automatically set the attribute with the right namespace.
<template>
<div v-bind:[attrName]="attrValue"></div>
</template>
<script>
export default {
data() {
return {
attrName : 'xlink:href',
attrValue : '...',
};
}
}
</script>
