1

I'm trying to create a siema slider displaying elements in an array using v-for. I initialize the siema slider in the Mounted method, however, when I try to do that, I get the error message TypeError: this.innerElements[r] is undefined. When I hardcode the slides, everything perfectly. It seems like the page tries to initialize the slider before the v-for elements are loaded, which should not be the case.

For testing purposes, I moved the code in initSiema() from mounted to a seperate method. I already tried calling the method from beforeUpdate(), from an if-clause with the condition that there are elements of class slide, and also using nextTick.

Is there any way to call the method after the content has properly loaded? Or am I missing something here?

let template =
        '<div class="slider-wrapper" @mouseover="hovered = true" @mouseleave="hovered = false">' +
            '<div class="slider-home">' +
                '<div v-for="slide in sliderItems" :key="slide.id" class="slide" :style="slide.Image ? {backgroundImage: getUrl(slide.Image)}: \' \'">' +
                    ------- Here I display the slides -------
                '</div>' +
            '</div>' +
            '<div class="controller">' +
                '<span class="btn prev"></span>' +
                '<span class="btn next"></span>' +
            '</div>' +
        '</div>';

    Vue.component('slider-home', {
        data: function () {
            return {
                hovered: false,
                sliderItems: null,
                apiUrl: appConstants.apiUrl
            }
        },
        methods: {
            getUrl(image) {
                const url = image.formats.large ? image.formats.large.url : image.url;
                return  'url(' + this.apiUrl + url + ')';
            },
            initSiema() {
                const sliderHome = document.querySelector('.slider-home');
                const homeSlider = new Siema(
                    {
                        selector: sliderHome,
                        duration: 800,
                        loop: true
                    }
                );
                const prev = document.querySelector('.prev');
                const next = document.querySelector('.next');
                prev.addEventListener('click', function () {
                    homeSlider.prev()
                });
                next.addEventListener('click', function () {
                    homeSlider.next()
                });
                setInterval(() => {
                    if (!this.hovered) {
                        homeSlider.next()
                    }
                }, 4500);
            }
        },
        beforeCreate: function(){
            const _self = this;
            axios.get(appConstants.apiUrl + '/sliders').then( function (response) {
                console.log(response.data);
                _self.sliderItems = response.data;
            });
        },
        mounted: function (){

            this.initSiema());

        }
        template: template
    });

    new Vue({
        el: '#slider-home',
        template: '<div><slider-home></slider-home></div>',
    });

n kowa
  • 11
  • 1
  • If someone encounters the same problem: I managed to solve it by setting a timeout to initializing siema using setTimeout :) – n kowa Sep 23 '22 at 18:30

0 Answers0