Olá, Tenho um componente que me inicializa um slider com items dinâmicos vindos da base de dados. No entanto, tenho uma caixa de pesquisa que faz uma nova requisição à base de dados e retorna novos items para substituir os existentes no slider. Mas não está a substituir, estando a ficar por cima do slider.
Segue o código do template do componente: (Existe sempre um item padrão (banner_default) que deve ser sempre o primeiro slide do slider)
<template>
<div @click.prevent="refresh()" class="week-slider valign-wrapper"><i class="fa fa-home" aria-hidden="true"></i></div>
<div id="feupworld_slide" class="owl-carousel owl-theme">
<div class="item">
<div class="textoverlay firstSlide"><span>{{ week }} / {{ year }}</span></div>
<img :src="'storage/guest/' + banner_default" alt="#FEUPWORLD">
</div>
<div class="item" v-for="slide in slider">
<div class="textoverlay captionSlide flow-text">
<a :href="slide.link" target="_blank">
<span class="background-slide-text show-link" style="font-size: 2.0vw;">{{ slide.title }}</span>
</a>
<div style="" class="hashtag">
<span class="light grey-text text-lighten-3 tags-slide background-slide-text">
<span v-for="tag in slide.tags" class="tags" style="font-size: 1.1vw;">#{{ tag.tag }} </span>
</span>
</div>
</div>
<img :src="'storage/noticias/images/' + slide.photo " alt="#FEUPWORLD">
</div>
</div>
Segue o script:
<script type="text/javascript">
export default{
data(){
return{
slider: [],
week: 0,
init: false,
banner_default: "banner_default.jpg",
year: new Date().getFullYear(),
link: "",
}
},
created(){
this.imageSlider();
},
methods:{
refresh(){
location.reload();
},
imageSlider(){
Vue.http.get('imageSlider').then((response) => {
this.slider = response.data.data;
this.week = response.data.data[0].week;
});
window.Vue.http.interceptors.unshift((request, next) => {
next(()=> {
this.sliderInit();
});
});
},
sliderInit(){
if(!this.init){
this.init = true;
Vue.nextTick(function () {
$("#feupworld_slide").owlCarousel({
singleItem:false,
items: 1,
autoplay: true,
autoPlaySpeed: 3000,
autoPlayTimeout: 3000,
dots: true,
loop:true,
pagination: true,
});
}.bind(this));
}
},
showWeekYearSlider(){
this.slider = [];
Vue.http.get('getimageSliderWeekYear/'+this.year+'/'+this.week).then((response) => {
this.slider = response.data.data;
});
}
},
events: {
'selectBanner'(data){
this.week = data.week;
this.year = data.year;
this.showWeekYearSlider();
},
},
}
O evento "selectBanner" chama a função que deveria subscrever os slides antigos pelos novos, segue um print do que me está a fazer (Sobrepõe-me as novas imagens em cima do slider umas por baixo das outras):
A imagem seguinte mosta no "1" os slides novo por cima do slide antigo e no "2" mostra os bullets com a quantidade de items anteriores mas que agora ficam em branco mantendo-se só o slider default, que está correto.