在 Nuxt 2 + Bootstrap 5 的 SSR 应用中，当 标签嵌套在触发 Collapse 的 内时，点击链接会意外触发折叠切换——即使使用 @click.stop 也无法阻止，根本原因是事件委托与原生 Bootstrap JS 的 DOM 监听机制冲突。解决方案是物理分离元素结构并明确职责。
在 nuxt 2 + bootstrap 5 的 ssr 应用中，当 `` 标签嵌套在触发 collapse 的 `
在 Bootstrap 5 中，data-bs-toggle="collapse" 依赖于原生 JavaScript 对 事件委托目标元素（即带该属性的按钮） 的监听。当 标签作为子元素嵌套在
✅ 正确做法是彻底解耦交互区域：将控制折叠的
以下是推荐实现方案：
<!-- ✅ 正确：按钮与链接分离，职责清晰 -->
<div class="d-flex align-items-center gap-2">
<button
v-for="file of orderProduct.files"
:key="file.id"
class="btn btn-link p-0 text-start collapsed son-collapse"
type="button"
data-bs-toggle="collapse"
:data-bs-target="`#collapseField${orderProduct.id}`"
aria-expanded="false"
:aria-controls="`collapseField${orderProduct.id}`"
>
<p class="mb-0"><i class="fa fa-file-alt me-1"></i> {{ file.original_filename }}</p>
<div class="small text-muted">
{{ file.page_count }} {{ $tc('home.pagina', file.page_count) }}
</div>
</button>
<!-- 独立链接，不嵌套在 button 内 -->
<a
:href="https://www.php.cn/link/11e2cf84863231d5e2fc5d5075a2dd4a"
target="_blank"
class="btn btn-outline-primary btn-sm"
@click.prevent="handleFileView(file)"
>
<i class="far fa-eye me-1"></i>Ver
</a>
</div>
<!-- 折叠内容区（保持不变） -->
<div
:id="`collapseField${orderProduct.id}`"
class="collapse summary cost-ajax mt-2"
>
<!-- ... 折叠内容 -->
</div>? 关键要点说明：
- 结构解耦：
- 事件修饰符选择：对链接使用 @click.prevent（而非 .stop），可阻止 默认跳转行为，再配合 target="_blank" 安全打开新页；若需额外逻辑（如埋点、权限校验），可在 handleFileView() 方法中统一处理；
- 无障碍增强：为独立链接补充 aria-label（如 :aria-label="Ver archivo: ${file.original_filename}"），提升可访问性；
- 样式一致性：利用 Bootstrap 5 的工具类（如 d-flex, gap-2, btn-link）保持视觉连贯，避免因结构变化影响 UI；
- Nuxt 2 注意事项：确保 bootstrap.bundle.js 已在 nuxt.config.js 的 script 中正确引入，且未被 Vue 的服务端渲染干扰（Collapse 初始化应在客户端完成）。
⚠️ 补充提醒：切勿尝试通过 @click.native.stop 或手动调用 e.stopPropagation() 绑定在嵌套 上修复此问题——这属于治标不治本，且在 SSR 场景下易引发 hydration mismatch。结构先行，语义明确，才是现代前端组件化开发的稳健实践。
