javascript - 将v-attr与包含冒号 'xmlns:href'的属性一起使用不会编译

我正在尝试使用v-attr添加包含冒号的属性，冒号是Vuejs key:value的定界符。它不会编译。

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
        v-attr="xmlns:href: '#' + iconID"></use>
</svg>

我也尝试过

<svg class="lego-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:href="#[[ iconID ]]"></use>
</svg>

结果相似。

最佳答案

我还没有使用过vue.js，但是看着the source for v-attr，它似乎是为处理xlink:href而设计的。

麻烦在于您的属性是错误的。应该是xlink:href，而不是xmlns:href。尝试:

<svg>
    <use v-attr="xlink:href: '#' + iconID"></use>
</svg>

(如果要在HTML页面中嵌入SVG，则不需要xmlns:xlink="http://www.w3.org/1999/xlink")。