使用v-attr，其属性包含冒号＆＃39; xmlns：href＆＃39;不编译

Question

我正在尝试使用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>

其结果相似。

Answer 1

您需要将xlink：href包装在引号中，以便Vue不会将冒号视为参数分隔符（https://github.com/yyx990803/vue/issues/648）

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

Answer 2

我没有使用过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"）。

Answer 3

使用新版vue.js，您可以使用

<use v-bind:href="'#icon-' + iconId"></use>

甚至

<use :href="'#icon-' + iconId"></use>

Vue.js似乎会自动使用正确的命名空间设置属性。