CODEWITHSUNDEEP
laravelvue.jsowl-carouselv-for
Quade du Toit
Quade du Toit

Reputation: 91

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

I've been hunting and trying for the last handful of days but with no success.

I am trying to render a list of quotes to be displayed as a carousal on a login page.

I need to pull a list of quotes from a database which i have done. I then need to loop through the quotes and display them in the owl.carousel.

If i manually add the div.elements, it renders without a problem. when i add the element in a v-for loop, it does not display. Can someone please advise or guide me into the correct direction? 

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

}

Upvotes: 0

Views: 1216

Answers (1)

Quade du Toit
Quade du Toit

Reputation: 91

found a solution here https://github.com/93gaurav93/v-owl-carousel/issues/16

My final code is as follows 

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

Upvotes: 2

Related Questions