Nuxt2 SSR+Bootstrap5：按钮内锚点点击异常问题求助

核心原因 #

1. HTML结构违规：<button>标签内不能嵌套<a>这类交互式元素，浏览器会自动修正错误结构，导致事件行为不符合预期。
2. 事件监听机制冲突：Bootstrap折叠组件基于原生事件监听实现，Vue的@click.stop只能阻止Vue内部的事件冒泡，无法拦截原生事件传递到Bootstrap的监听函数，所以之前的尝试无效。

解决方案 #

方案一：重构HTML结构（推荐） #

将包裹内容的<button>替换为<div>，模拟按钮交互行为，同时用Vue手动控制Bootstrap折叠组件，从根源避免结构冲突。

模板代码

<div 
    v-for="file of orderProduct.files"
    class="collapsed son-collapse btn btn-light" 
    role="button"
    @click="toggleCollapse($event, orderProduct.id)"
    :aria-expanded="false"
    :aria-controls="`collapseField${orderProduct.id}`"
>
    <p><i class="fa fa-file-alt"></i> {{ file.original_filename }}</p>
    <div>
        <a 
            :href="`http://example.com`"
            target="_blank"
        >
            <i class="far fa-eye"></i>Ver
        </a>
        <span>{{ file.page_count }} {{ $tc('home.pagina', file.page_count) }}</span>
    </div>
</div>
<div 
    :id="`collapseField${orderProduct.id}`"
    class="collapse summary cost-ajax" 
>  
   <!-- 折叠内容 -->
</div>

脚本代码

export default {
    methods: {
        toggleCollapse(event, id) {
            // 判断点击目标是否为链接或其后代元素，是则跳过折叠逻辑
            const isLink = event.target.closest('a');
            if (isLink) return;

            // 获取或创建Bootstrap折叠实例并切换状态
            const collapseEl = document.getElementById(`collapseField${id}`);
            const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl);
            collapseInstance.toggle();
        }
    }
}

方案二：保留按钮标签（不推荐） #

如果必须使用<button>，需移除Bootstrap的data-bs-toggle属性，手动处理链接跳转和折叠逻辑：

模板代码

<button 
    v-for="file of orderProduct.files"
    class="collapsed son-collapse" 
    type="button" 
    @click="toggleCollapse($event, orderProduct.id)"
    :aria-expanded="false"
    :aria-controls="`collapseField${orderProduct.id}`"
>
    <p><i class="fa fa-file-alt"></i> {{ file.original_filename }}</p>
    <div>
        <a 
            @click.prevent.stop="openLink(`http://example.com`)"
        >
            <i class="far fa-eye"></i>Ver
        </a>
        <span>{{ file.page_count }} {{ $tc('home.pagina', file.page_count) }}</span>
    </div>
</button>
<div 
    :id="`collapseField${orderProduct.id}`"
    class="collapse summary cost-ajax" 
>  
   <!-- 折叠内容 -->
</div>

脚本代码

export default {
    methods: {
        toggleCollapse(event, id) {
            const isLink = event.target.closest('a');
            if (isLink) return;

            const collapseEl = document.getElementById(`collapseField${id}`);
            const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl);
            collapseInstance.toggle();
        },
        openLink(url) {
            // 手动触发新标签页跳转
            window.open(url, '_blank');
        }
    }
}

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