How to render bootstrap rotation with vue

example of bootstrap official website rotation: 

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="-sharpcarouselExampleControls" 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="-sharpcarouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Note that the class activated by carousel-item is crousel-item active

. 
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

    <div class="carousel-item active" v-for="item of data" :key="item.key">
      <img class="d-block w-100" :src="item.key" alt="First slide">
    </div>

  </div>
  <a class="carousel-control-prev" href="-sharpcarouselExampleControls" 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="-sharpcarouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

this will lead to problems. All class has active, and all of them are active, so you can"t switch between rosters

.

I think it is written like this 

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    
    <div v-for="(item,index) of data">
    <div v-if="index==0">
        <div class="carousel-item active" :key="item.key">
          <img class="d-block w-100" src="item.img" alt="First slide">
        </div>
    </div>
    <div v-else>
       <div class="carousel-item " :key="item.key">
          <img class="d-block w-100" src="item.img" alt="First slide">
        </div>
    </div>
    
    
  </div>
  <a class="carousel-control-prev" href="-sharpcarouselExampleControls" 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="-sharpcarouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

but these writes can not be switched, how to solve this?

Vue.js bootstrap
May.30,2022

first talk about your own idea of writing rotation with vue.

Seamless loops are two more pictures at the beginning and end, which are not discussed first, and then the problem of active.
active, you can process your original data format slightly, anyway, you need a logo, such as
[index: 0, src:'],
[index: 1, src:']
.

like this, class can be dynamically bound in vue code 

<div v-for="(item, index) in data">
    <div :class="`item ${index === item.index ? 'active' : ''}`"></div>
</div>

Preview:

bs does not have a vue version
https://bootstrap-vue.js.org/

Previous: Graphql cannot be found at runtime after the combination of vue and django project

Next: Mysql queries missing data

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea94bd-1f49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea94bd-1f49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?