vue.js - 带有猫头鹰轮播的动态图像

Question

我正在尝试遍历类别图像的数据并将其呈现在猫头鹰轮播中。如果我对图像进行硬编码，但它在我使用循环时不起作用。它垂直列出图像并且不滑动..我在网上到处搜索但到目前为止没有运气..下面是我的代码

<carousel
            :autoplay="true"
            :margin="50"
            :nav="false"
            :items="4"
            :dots="false"
            :loop="true"
            :rewind="false"
            :responsive="{
              0: { items: 2 },
              767: { items: 2, nav: false },
              1000: { items: 4, nav: false },
            }"
          >
            <template slot="prev">
              <span class="prev">
                <i
                  class="mdi mdi-arrow-left"
                  aria-hidden="true"
                  style="vertical-align: middle; font-size: 20px"
                ></i> </span
            ></template>
            <div>
              <span v-for="(cat, i) in allCategories" :key="i">
                <img :src="cat.product_image" :key="i" />
                <b-card class="text-center cat-details">
                  <h6>{{ cat.name }}</h6>
                </b-card>
              </span>
            </div>

            <!-- <span>
              <img src="../assets/images/fruits.png" />
              <b-card class="text-center cat-details">
                <h6>Fruits</h6>
              </b-card>
            </span>

            <span>
              <img src="../assets/images/oil_and_spices.png" />
              <b-card class="text-center cat-details">
                <h6>Oil & Spices</h6>
              </b-card>
            </span>

            <span>
              <img src="../assets/images/packaged.png" />
              <b-card class="text-center cat-details">
                <h6>Packaged Foods</h6>
              </b-card>
            </span> -->
            <template slot="next"
              ><span class="next">
                <i
                  class="mdi mdi-arrow-right"
                  aria-hidden="true"
                  style="vertical-align: middle; font-size: 20px"
                ></i> </span
            ></template>
          </carousel>

注释部分是硬编码的图像，效果很好。我不知道这里是否缺少一些东西。我什至尝试将密钥绑定到图像仍然没有运气。请您的帮助表示赞赏..我真的希望得到一个答案

标签： vue.jsowl-carousel