如何将HTML元素ID设置为v-for循环中的整数

Question

我正在为一个项目使用vueJS，从v-for循环中创建X数量的svg元素。我希望所有这些元素都有一个唯一的Id，它将来自v-for循环中的i索引。我试着这样做，但我一直得到一个错误

<div class="container">
<div class="sub-container">
<div v-for="(building,i) in buildings" :key="i">
<svg id="svg" + i  width="850" height="800">{{ building.title}}</svg>
</div>
</div>
</div>

错误消息

vue.esm.js?efeb:4493 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '+' is not a valid attribute name.
at baseSetAttr (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6795:8)
at setAttr (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6770:5)
at Array.updateAttrs (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6725:7)
at invokeCreateHooks (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6079:22)
at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5966:11)
at createChildren (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6063:9)
at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5964:9)
at createChildren (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6063:9)
at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5964:9)
at createChildren (webpack-internal:///./node_modules/vue/dist/vue.esm.js:6063:9)

这里是我在v-For循环中使用的buildings文件，供参考

export var buildings = [
{
title: 'Main',
id: 'svg0',
source: '../static/building_main.json'
},
{
title: 'Laboratory',
id: 'svg1',
source: '../static/building_lab.json'
},
{
title: 'Factory',
id: 'svg2',
source: '../static/building_factory.json',
}
]
export default buildings;

我认为在制作SVG标记时，它必须与语法有关。我不知道该怎么做。我主要使用Java和c++，所以我对HTML有点不熟悉。任何帮助都会得到通知。

Answer 1

尝试使用

<svg :id="'svg' + i"  width="850" height="800">{{ building.title}}</svg>

Answer 2

绑定id。https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript表达式

<div v-for="(building,i) in buildings" :key="i">
<svg :id="'svg' + i" width="850" height="800">{{building.title}}</svg> //`:id` is shorthand for `v-bind:id`
</div>