如何改变data-bs-slide-to的值动态引导5和vue js 2

Posted 2023-05-08

【中文标题】如何改变data-bs-slide-to的值动态引导5和vue js 2

【英文标题】：How to change the value of data-bs-slide-to dynamically bootstrap 5 and vue js 2

【发布时间】：2021-12-30 13:20:02

【问题描述】：

我正在尝试做一个动态轮播，几乎成功了，但我需要根据给定的数组自动填充 bootstrap 5 属性“data-bs-slide-to”。

完整代码：

<template>
    <div :style="styles" id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button v-for="(item, index) in imagesUrl" :key="index" data-bs-slide-to="0" type="button" data-bs-target="#carouselExampleIndicators"  ></button>
  </div>
  <div class="carousel-inner">
    <div v-for="(item, index) in imagesUrl" :key="index"  :class="'carousel-item': true, active: index == 0 " >
      <img v-bind:src="item" class="d-block w-100" >
    </div>
</div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <font-awesome-icon icon="angle-left" size="3x"/>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <font-awesome-icon icon="angle-right" size="3x" />
  </button>
</div>
</template>
<script>
  import 'bootstrap/js/dist/carousel';

    export default 
  data() 
    return 
      // arrayTexts: [] no consider this
    ;
  ,
  props: 
    colorBtnSlider: 
      type: String,
      default: "#A93226",
    ,
    colorHover: 
      type: String,
      default: "#F4D03F",
    ,
    imagesUrl:
      type: Array,
      default: () => [],
    
  ,
  computed: 
    styles() 
      return 
        "--carrousel-3--colorBtnSlider": this.colorBtnSlider,
        "--carrousel-3--colorHover": this.colorHover,
      ;
    
  
;
</script>
<style lang="scss">
.carousel-control-prev-icon , .carousel-control-prev-icon
    color: var(--carrousel-3--colorBtnSlider);

.carousel-control-prev:hover, .carousel-control-next:hover
    color: var(--carrousel-3--colorHover);

</style>

我的组件使用这个 json，它允许生成动态组件。

 "Carrousel1":
        "basename":"carrousel-3",
        "path":"./core/carrousel/Carrousel3.vue",
        "props":
            "colorBtnSlider" : "#A93226",
            "colorHover" : "#A93226",
            "imagesUrl" : [
                "https://picsum.photos/1000/500/?image=55",
                "https://picsum.photos/1000/500/?image=56",
                "https://picsum.photos/1000/500/?image=57"
            ]
        
    ,

尝试做这样的事情，如果它对我有用。

 <div v-for="(item, index) in imagesUrl" :key="index"  :class="'carousel-item': true, active: index == 0 " >
      <img v-bind:src="item" class="d-block w-100" >
    </div>

但是使用data-bs-slide-to属性，我需要从0往前走，例如从0到2，相当于json中添加的3张图片。

    <button v-for="(item, index) in imagesUrl" :key="index" data-bs-slide-to="index" type="button" data-bs-target="#carouselExampleIndicators"  ></button>

但这不起作用，尝试：data-bs-slide-to = "index" 但它也不起作用。

对不起我的英语。

【参考方案1】：

我找到了解决方案，它比我想象的要简单，我只需要使用模板字符串。

因此：

<button v-for="(item, index) in imagesUrl" :key="index" :data-bs-slide-to="`$index`" type="button" data-bs-target="#carouselExampleIndicators"  ></button>

所以我可以使用 v-for 索引作为引导标签。