Dont work with axios

[imojiz]

when I read data with axios and with v-fore between , not working. Please guide me to do right. Thanks .

[mayur19]

I think v-owl-carousel component is initializing before data is added to the component using axios. This is most common problem in most of third party wrappers. In which state or position you are initializing v-owl-carousel ?

[imojiz]

My code is like this

[imojiz]

@mayur19 How I can initializing v-owl-carousel component after add data to the component using axios?

[mayur19]

Try to execute server call in mounted(). When data is received from the component will update. The code should be something like this

import axios from "axios";
import axios from "axios";`

import carousel from "v-owl-carousel";
export default {
    name: "specials",
    components: {carousel},
    data(){
        return{
            image:[]
        }
    },
    mounted(){
        this.getImagesFromServer();
    },
    methods : {
        getImagesFromServer(){
            axios.get("/photos")
            .then((res)=>{
                this.image.push(res.data)
            })
            console.log(this.image)
        }
      }
  }

Actually I followed this workaround for Jquery. Lets see what happens with this wrapper.

[imojiz]

@mayur19 thank you very much. your solution is right. but for working Carousel I changed 'mounted' to 'updated' in v-owl-carousel/src/Carousel.vue code in line 90.

[mayur19]

@imojiz That's great! @93gaurav93 can you add a section about integration using Axios in readme?

[vstruhar]

Not sure how this is a solution, since mounted comes after created in the vue component lifecycle. Plus it only means in what stage the ajax request will be triggered.

Solution that worked for me was wrapping carousel component into a div and hiding (not rendering) it with v-if until the data is loaded. This works because:

The block will only be rendered if the directive’s expression returns a truthy value.

Sample code

<template>
    <div v-if="products.length > 0">
        <carousel :items="4">
            <img v-for="product in products" :src="product.imageUrl">
        </carousel>
    </div>
</template>

<script>
    import carousel from 'v-owl-carousel';

    export default {
        components: {carousel},
        data() {
            return {
                products: [],
            };
        },
        mounted() {
            this.$http.get('/api/products')
                .then(resp => {
                   this.products = resp.data;
                });
        },
    }
</script>

[imojiz]

@vstruhar ooh yes.it worked. thank you very much.