在引导轮播项目中显示按钮答案

【问题标题】：Displaying a button inside a bootstrap carousel item在引导轮播项目中显示按钮
【发布时间】：2021-05-14 17:37:52
【问题描述】：

我有一些数据正在使用 bootstrap 5 轮播显示。但是，我要显示的按钮根本没有显示。还有其他地方我可以放置按钮并让它显示，但我不会得到我试图绑定的 id 值。

如何显示按钮，以便将 id 绑定到正在显示的当前图像

这是代码

<div class="col-md-4">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
      <img src="https://api.example.com/uploads/609cd3aab147a.jpg" class="d-block w-100 cs" alt="...">
    </div>
    
    <div class="carousel-item" v-for="(value,index) in image_viewer_data">
      <img class="d-block w-100"  :src="value" :id="index" >
      <button class="btn btn-danger btn-block float-right" @click="handleClick" :id="index">Delete Photo</button>   
    </div>
  </div>
  
  
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </div>

【问题讨论】：

标签： twitter-bootstrap vue.js vuejs2

【解决方案1】：

我将按钮包裹在标题 div 周围

<div class="col-md-4">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
      <img src="https://api.example.com/uploads/609cd3aab147a.jpg" class="d-block w-100 cs" alt="...">
    </div>
    
    <div class="carousel-item" v-for="(value,index) in image_viewer_data">
      <img class="d-block w-100"  :src="value" :id="index" >
      <div class="carousel-caption">
        <button class="btn btn-danger btn-block float-right" @click="handleClick" :id="index">Delete Photo</button>  
       </div>   
    </div>
  </div>
  
  
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

并访问 id

handleClick (e) {
  e.preventDefault()
  alert(event.target.id)
},

【讨论】：