带有 vue js 组件的轮播引导程序

Posted

技术标签:

【中文标题】带有 vue js 组件的轮播引导程序【英文标题】:Carousel bootstrap with vue js component 【发布时间】:2022-01-19 00:02:36 【问题描述】:

目前我正在使用带有指示器 GetBootstrap Carousel With indicators 的 Carousel 创建一个组件 我正在一个 vue 组件中实现此代码,例如:

<template>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <div v-for="(image, index) in images" :key="index">
                <li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
            </div>
        </ol>
        <div class="carousel-inner">
            <div v-for="(image, index) in images" :key="index">
                <div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
                    <img class="d-block w-100" :src="image.path" :>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</template>

<script>
    export default 
        props: ["app_route"],
        data() 
            return 
                images: [],
            ;
        ,
        mounted: function() 
            this.getItemsSlider();
        ,
        methods: 
            getItemsSlider() 
                axios
                    .get(this.app_route + "/admin/slider/list", 
                    )
                    .then((response) => 
                        //console.log("response: ", response.data);
                        this.images = response.data;
                    );
            ,
        
    ;
</script>

目前第一张图片正在显示,但其他图片没有显示,滑块也不工作。

为什么?我做错了什么?

这里是代码codesandbox

【问题讨论】:

【参考方案1】:

根据the documentation,必须严格嵌套元素.carousel-inner &gt; .carousel-item

你应该试试这个:

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

【讨论】:

是的!是工作!!!非常感谢!

以上是关于带有 vue js 组件的轮播引导程序的主要内容,如果未能解决你的问题,请参考以下文章

我无法使用引导程序将图像链接到我的轮播中主机上的页面

如何仅在反应中使用引导程序(5.1v)中的轮播?

带有 nativescript-vue 的轮播

如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS

vue中的轮播图

Vue js引导程序在折叠时添加动画