vue3+bootstrap5中,v-for与click一起用时事件无效

遇到的问题

最开始我以为我遇到的问题：

v-for 和 @click一起用导致click事件无效

然后在网上搜了好久，试了很多解决方案，但是都没有成功

实际上我遇到的问题：

我的v-for写在bootstrap5的list-group的li标签上，而该标签以及子标签是无法触发click事件的

解决方案

把列表组list-group改成表格table(同样也是bootstrap5中的)

最后代码为:

<main>
      <!-- 表格 -->
      <table class="table table-hover">
        <tbody>
          <!-- 一行 -->
          <tr v-for="(item,index) in list" :key="item.userid" >
            <!-- 用户名 -->
            <td @click="doclick('用户详细')">
              <span>{{ item.username }}</span>
            </td>
            <!-- 按钮 -->
            <td class="td-btn" v-if="item.isFocus">
              <button @click.stop="unFocus(index,item.userid)" 
					    type="button" class="btn btn-secondary">
						    已相互关注
					    </button>
            </td>
            <td class="td-btn" v-else>
              <button @click.stop="focus(index,item.userid)"  
					    type="button" class="btn btn-primary">
						    回关
					    </button>
            </td>
          </tr>
        </tbody>
      </table>
    </main>

其中防止table被内容撑开改变宽度的style为

table{
  table-layout: fixed;
  word-break: break-all;
}