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