Assign index of v-for to id of created component

Question

I am creating components in a loop in my vue app. However, I need those components to have an id value like "board-1" etc. using the index of the loop. (Just like I did it with v-bind:key="component-${block._uid}".)

How can I achieve this?

<div
   class = "col-4"
   v-for="(block, index) in layouts"
   v-bind:key="`component-${block._uid}`"
>
   <Board
     id="`board-${block._uid}`"
     class="droparea"
     @dropped-component="$emit('dropped-component', $event, index)"
     :acceptsDrop=true
     draggable="true"
     >
        Layout {{index + 1}}
   </Board>
</div>

Answer 1

You need to bind the value for JS code to get executed, otherwise you are attributing a string, not JS code.

:id="`board-${block._uid}`"

You can also use v-bind, actually : is just a shorthand

v-bind:id="`board-${block._uid}`"