owl.carousel vue.js 组件未在 Laravel 应用程序中呈现

Question

最近几天我一直在寻找和尝试，但没有成功。

我正在尝试呈现要在登录页面上显示为轮播的报价列表。

我需要从我已经完成的数据库中提取报价列表。然后我需要遍历引号并将它们显示在 owl.carousel.

如果我手动添加 div.elements，它可以毫无问题地呈现。当我在 v-for 循环中添加元素时，它不显示。有人可以建议或指导我正确的方向吗？

<template>

<carousel class="crsl" :autoplay="true" :nav="false" :items="1">

    <div v-for="(item, index) in quotes" :key="item.id" v-text="item.quote"></div>

</carousel>

import carousel from 'vue-owl-carousel';

export default {

    components: { carousel },

    mounted() {

        console.log('Component mounted.')

        axios.post('api/quotes', {})
            .then(response => {
                this.quotes = response.data;
            });
    },

    data: function () {
        return {
            quotes: null,
        }
    },

}

Answer 1

在这里找到了解决方案 https://github.com/93gaurav93/v-owl-carousel/issues/16

我的最终代码如下

<template>

<div v-if="quotes.length > 0">
    <carousel :items="1" :autoplay="true" :nav="false" :dots="false">

        <div v-for="(item, index) in quotes">

            <div v-text="item.quote"></div>

        </div>

    </carousel>
</div>

<script>

import carousel from 'vue-owl-carousel';

export default {

    components: { carousel },

    data() {
        return {
            quotes: [],
        };
    },
    mounted() {
        axios.post('/api/quotes')
            .then(resp => {
                this.quotes = resp.data;
            });
    },
}

owl.carousel vue.js 组件未在 Laravel 应用程序中呈现

owl.carousel vue.js component not rendering in lavarel application

laravel

vue.js

owl-carousel

v-for