如何使用动态生成的ID创建Vue.js模态

Question

VueJS新手，有点迷失方向。我有一个表，它接受一个对象数组，并生成每一行以供显示。

对于每一行，都应该有一个按钮。单击该按钮时，模态应显示该行中的特定文本。

我正在生成这样的模态：

<td style="width:185px;margin:auto;vertical-align:middle;">
<b-button v-bind:v-b-modal="'Modal' + d.Id" size="sm">Select Associate</b-button>
<b-modal v-bind:id="'Modal' + d.Id" title="Primary Associate Selected" hide-footer>
Click "Copy and Create" to copy {{ d.Name}}'s phone number and to create an assignment.
<b-button
class="mt-3"
variant="outline-primary"
block
@click="$bvModal.hide('Modal' + d.Id), copyPhoneAndCreateAssignment(d)"
>Create Assignment</b-button>
<b-button class="mt-3" block @click="$bvModal.hide('Modal' + d.Id)">Cancel</b-button>
</b-modal>
</td>

问题是我不知道如何生成动态ID。v-bind:id="'Modal'+d.id"似乎无法正常工作。模态不会弹出我上面的代码。

如果我手动设置，模态会显示，但其他具有相同ID的模态也会显示…：(有帮助吗？

谢谢！

Answer 1

好的，没关系。我想通了哈哈。

如果设置为：，则b按钮可以采用动态Id

<b-button v-b-modal="'SecondaryModal' + d.Id" size="sm">Select Firm</b-button>

b-modal应该将其ID设置为：

<b-modal :id="'SecondaryModal' + d.Id" title="Secondary Firm Selected" hide-footer>