Vue绑定data-bs-target属性时如何在变量值前添加#号

解决方案 #

直接在Vue的属性绑定表达式中做字符串拼接，给data-bs-target的取值拼接前缀#即可。注意aria-controls和折叠容器的id属性只需要绑定纯id值，不需要加#。

两种可用的拼接写法：

• 模板字符串写法（推荐，可读性更好）：:data-bs-target="#${card_id}"
• 普通字符串拼接写法（兼容所有Vue版本）：:data-bs-target="'#' + card_id"

修正后的完整代码如下：

<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>

绑定后Bootstrap拿到的data-bs-target值就是标准的id选择器格式，只会匹配对应id的折叠容器。之前的写法是把纯id值传给了data-bs-target，Bootstrap无法将其识别为id选择器，匹配逻辑出错才会出现点击一个按钮触发所有卡片折叠的问题。

内容的提问来源于stack exchange，提问作者SlywolF