如何将 HTML 元素 ID 设置为 v-for 循环中的整数？ [复制]答案

【问题标题】：How to set HTML element ID to an integer from v-for loop? [duplicate]如何将 HTML 元素 ID 设置为 v-for 循环中的整数？ [复制]
【发布时间】：2021-04-01 20:03:22
【问题描述】：

我在一个项目中使用 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有点陌生。任何帮助都会得到帮助。

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

尝试使用

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

【讨论】：

【解决方案2】：

绑定ID。 https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

<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>

【讨论】：