一种在html属性值data-bs-target的变量前插入#的方法

Question

所以基本上，我有一个 vue web 应用程序并创建了一个带有多个引导卡的容器。 这些卡片有一个按钮，可以折叠我为客人制作的表格以供申请。 但是，当我按下卡片的按钮时，它会立即折叠所有卡片的应用形式。 为了解决这个问题，我必须给每张卡片一个特定的id ，它与按钮的data-bs-target和aria-controls相匹配。 到目前为止，一切都很好。

我制作了一个变量card_id并使用v-bind其插入到属性值中，但它不起作用。 原因是，属性data-bs-target在实际变量名称之前需要一个标签，但我想不出一种方法来做到这一点。

代码示例：

    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
    <div class="card card-body">
      <GuestForm></GuestForm>
    </div>
</div>

我显然不能只在变量前面放一个标签，那么我的下一个最佳解决方案是什么？ 先感谢您。

Answer 1

您可以将字符串模板与反引号 `` 一起使用，例如：

  <button :data-bs-target="`#${card_id}`"