Блог

Главная - Вопросы по программированию - Отображение кнопки внутри элемента карусели начальной загрузки

Отображение кнопки внутри элемента карусели начальной загрузки

#twitter-bootstrap #vue.js #vuejs2

Вопрос:

У меня есть некоторые данные, которые я отображаю с помощью карусели bootstrap 5. Однако кнопка, которую я хочу отобразить, вообще не отображается. Есть и другие места, где я мог бы разместить кнопку и отобразить ее, но я не получу значение идентификатора, которое пытаюсь привязать.

Как я могу отобразить кнопку так, чтобы идентификатор был привязан к текущему отображаемому изображению

Это и есть код

 <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>

Ответ №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>

и получить доступ к идентификатору

 handleClick (e) {
  e.preventDefault()
  alert(event.target.id)
},
Метки: