Присвойте индекс v-for идентификатору созданного компонента

Question

Я создаю компоненты на al oop в моем vue приложении. Однако мне нужно, чтобы эти компоненты имели значение идентификатора, например "board-1" et c. используя индекс l oop. (Так же, как я сделал это с компонентом v-bind:key=" - $ {block._uid} ".)

Как я могу этого добиться?

<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

Вам необходимо привязать значение для JS кода для выполнения, иначе вы присваиваете строку, а не JS код.

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

Вы также можете использовать v-bind, на самом деле : - это просто сокращение

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