How to set HTML element ID to an integer from v-for loop?

Question

I am using vueJS for a project to create X amount of svg elements from a v-for loop. I want all of these elements to each have a unique Id to them which will come from the i index in the v-for loop. I tried doing this but I kept getting an error

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

ERROR MESSAGE

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)

For reference here is the buildings file that I use in the v-for loop

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;

I assume it has to be something with the syntax when I make the SVG tag. I am not sure how to do this properly. I mainly use Java and c++ so I am a little unfamiliar with HTML. Any help is appriciated.

score 2 · Answer 1 · answered Dec 23 '20 at 07:01

2

try to use

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

answered Dec 23 '20 at 07:01

andrei040191

408
4
7

score 1 · Answer 2 · edited Jul 15 '22 at 00:23

1

Bind id. https://v2.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>

edited Jul 15 '22 at 00:23

tony19

125,647
18
229
307

answered Dec 23 '20 at 07:03

wangdev87

8,611
3
8
31

How to set HTML element ID to an integer from v-for loop?

2 Answers2