vue+bootstarp 用for循环遍历出数据,按钮被重复触发

Question

只想触发当前点击按钮,并不想触发全部点击事件,请问怎么解决? 急,在线等

<b-card no-body style="background-color:#181b2a;">
  <b-tabs pills card>
    <b-tab title="你好" active>

      <div v-for="(item,index) in ByTicket" :key="index" class="content">

        <div class="left">
          <div class="d-flex align-items-start">
            <div class="crownbg">
              <p class="crown text-center">{{index+1}}</p>
            </div>

            <div class=" flex-column">
              <h3>{{item.title}}</h3>
              <span class="text-info">{{item.name}}</span>
            </div>
          </div>
        </div>

        <b-btn @click="toggle()" class="btn btn-outline-info">查看介绍</b-btn>

        <div v-show="isShow">
          <p class="card-text text-light">{{item.resume}}</p>
          <a href="#">123</a>
          <a href="#">123</a>
        </div>

Answer 1

使用@click.stop="toggle()"， @click.stop可以阻止单击事件继续传播

建议看看vue的事件修饰符

Answer 2

阻止冒泡事件，具体api可参考官网怎么阻止冒泡