将 v-for 的索引分配给创建的组件的 id

Question

我正在我的 vue 应用程序中循环创建组件。但是，我需要这些组件使用循环索引具有一个 id 值，如“board-1”等。（就像我用 v-bind:key="component-${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，其实:只是一个shorthand

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

将 v-for 的索引分配给创建的组件的 id

Assign index of v-for to id of created component

vue.js

v-for