owl.carousel vue. js компонент не отображается в приложении lavarel

Question

Я охотился и пробовал последние несколько дней, но безуспешно.

Я пытаюсь отобразить список цитат, которые будут отображаться в виде карусели на странице входа в систему.

Мне нужно вытащить список цитат из базы данных, которую я сделал. Затем мне нужно l oop просмотреть кавычки и отобразить их в owl.carousel.

Если я добавлю div.elements вручную, он будет отображаться без проблем. когда я добавляю элемент в v-for l oop, он не отображается. Может кто-нибудь посоветовать или направить меня в правильном направлении?

<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;
            });
    },
}