Vue中实现按钮嵌套交互：Bootstrap样式下链接失效问题求助

核心问题 #

1. span标签不支持href属性：你给span加v-bind:href完全无效，因为span不是可点击的链接元素，自然没法触发跳转。
2. 事件冒泡冲突：就算换成a标签，内部按钮的点击事件会向上冒泡，导致点击删除时也会触发外层的跳转行为。

修正方案 #

方案1：用a标签作为外层容器（推荐）

把外层的span换成a标签，保留Bootstrap的btn类，同时给内部按钮的点击事件添加.stop（阻止冒泡）和.prevent（阻止默认行为）修饰符，确保点击删除时不会触发跳转：

<a v-for="link in links"
   class="btn btn-success d-flex align-items-center gap-2"
   :href="`${domain}${link.file}`">
  {{ link.fileName }} <!-- 补充显示文件名，让用户明确操作对象 -->
  <button type="button" class="btn btn-danger btn-sm" @click.stop.prevent="deleteFile(link.file_id)">-</button>
</a>

修改点说明：

• 替换span为a标签，利用a原生支持href的特性实现跳转
• 新增d-flex align-items-center gap-2（Bootstrap布局类），让文件名和删除按钮横向对齐、间距合理
• 删除按钮用btn-sm类缩小尺寸，匹配“小型删除按钮”的需求
• @click.stop.prevent：.stop阻止事件冒泡到外层a标签，.prevent避免按钮默认行为干扰
• 简化deleteFile传参，直接传递link.file_id即可，无需多余的模板字符串写法

方案2：用div+点击事件实现跳转

如果不想用a标签，也可以用div作为外层，绑定click事件处理跳转，同时内部按钮阻止冒泡：

<div v-for="link in links"
     class="btn btn-success d-flex align-items-center gap-2"
     @click="window.location.href = `${domain}${link.file}`">
  {{ link.fileName }}
  <button type="button" class="btn btn-danger btn-sm" @click.stop="deleteFile(link.file_id)">-</button>
</div>

修改点说明：

• 用div代替span，通过@click触发window.location.href实现当前页跳转（如需新窗口打开可改用window.open）
• 内部按钮用@click.stop阻止事件冒泡，避免点击删除时触发外层跳转逻辑

额外提示 #

• 务必在外层容器中显示文件名，否则用户无法明确操作的目标文件（你原代码遗漏了这部分）
• 调试时可右键点击删除按钮选择“检查”，确认事件绑定是否正确，或查看浏览器控制台是否有报错信息

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