Can't figure out how to set the id to the index of the v-for loop.

I've tried:

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= {{index}} type= "number">
</li>

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= index type= "number">
</li>

And many other variations but it would not work. Would appreciate help!

Can't figure out how to set the id to the index of the v-for loop.

I've tried:

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= {{index}} type= "number">
</li>

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= index type= "number">
</li>

And many other variations but it would not work. Would appreciate help!

• javascript
• html
• vue.js
• indexing
• tags

Share Improve this question Follow edited Feb 26, 2021 at 5:17 Gbeck asked Feb 26, 2021 at 4:51 GbeckGbeck 4111 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

If you are trying to add item-index like item-1, item-2, to avoid id confliction.

Try using Template literals, like: myname-${index}.

Don't forge the "``".

Reference: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals

<li v-for="(item, index) in items" v-bind:key="item.id">
   <input v-bind:id="`yourname-${index}`" type= "number">
</li>

You can try using v-bind:id like below:

<li v-for="(item, index) in items" v-bind:key="item.id">
   <input v-bind:id="index" type= "number">
</li>

For css response use some string at the begining of id structure as below:

<li v-for="(item, index) in items" v-bind:key="item.id">
    <input v-bind:id="'str' + index" type="number">
</li>