Cheston Lee Cheston Lee - 2 months ago 17
Javascript Question

Using v-attr with attribute that contains colon 'xmlns:href' does not compile

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.

Answer

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").

Comments