Uncaught TypeError: Cannot read property 'style' of undefined while using Carousel

[Elandlord]

While using v-gallery, the gallery seems to be working fine. However, when I change the type to carousel, I get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined while using Carousel

This error appears seconds after rendering.

Down here you can see the code I'm working with. The list is populated via the props on the component. They are working fine with the gallery type.

<script>
    import collect from 'collect.js';

    export default {
        props: [
            'jsonList',
            'apiUrl',
        ],

        data(){
            return {
                list: null,
            }   
        },

        mounted() {
            let parsedJSON = collect(JSON.parse(this.jsonList));

            this.list = parsedJSON.map((image) => {
                return {
                    title: image.custom_properties.alt,
                    url: this.apiUrl + image.id + "/" + image.file_name
                }
            }).toArray();
        }
    };
</script>

[TerryZ]

Your url property setting incorrect, you need to use require() to wrap it.

{
    title: image.custom_properties.alt,
    url: require(this.apiUrl + image.id + "/" + image.file_name)
}

[Elandlord]

Hi, thanks for you answer.

I've tried implementing your solution. Unfortunately, that didn't solve the issue.

[Vue warn]: Error in mounted hook: "Error: Cannot find module ".""

For the following code

<template>
    <!-- default gallery mode -->
    <v-gallery v-if="this.list != null" type="carousel" :images="list">
    </v-gallery>
</template>
<script>
    import collect from 'collect.js';

    export default {
        props: [
            'jsonList',
            'apiUrl',
        ],

        data(){
            return {
                list: null,
            }   
        },

        mounted() {
            let parsedJSON = collect(JSON.parse(this.jsonList));

            this.list = parsedJSON.map((image) => {
            let url = this.apiUrl + image.id + "/" + image.file_name;
                return {
                    title: image.custom_properties.alt,
                    url: require(url)
                }
            }).toArray();
        }
    };
</script>

Logging the url gives me this: http://api.URLHERE.local/storage/5/image.jpg (for example). I've tried parsing it to a string as well, unfortunately, that didn't work either.

Do you have any other ideas? Or am I missing a dependency?

[TerryZ]

Try use static data

mounted(){
    this.list = [
        {title:'1', url: 'http://api.URLHERE.local/storage/1/image.jpg'},
        {title:'2', url: 'http://api.URLHERE.local/storage/2/image.jpg'},
        {title:'3', url: 'http://api.URLHERE.local/storage/3/image.jpg'}
    ];
}

[Elandlord]

Unfortunately, I didn't get it to work. I ended up using another package. I am still not sure how to solve this.

Anyway thanks for you help!