0

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):

inserir a descrição da imagem aqui

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.

inserir a descrição da imagem aqui

1 Resposta 1

1

Passei por este problema a pouco tempo, no meu caso eu precisei encapsular o owl-carousel dentro de um component.

owl-carousel.vue

<template>
  <ul>
    <slot></slot>
  </ul>
</template>

<script src="./owl-carousel.vue.js"></script>
<style src="./owl-carousel.vue.css"></style>

owl-carousel.vue.js

import './assets/owl.carousel.css'
import './assets/owl.theme.css'
import './assets/owl.carousel.js'

export default {
  name: 'OwlCarousel',
  props: {
    items: Number,
    itemsDesktopSmall: Array,
    itemsTablet: Array,
    itemsTabletSmall: Array,
    itemsMobile: Array,
    value: Array
  },
  data () {
    return {
      widget: null
    }
  },
  computed: {
    options () {
      return {
        items: this.items,
        itemsDesktopSmall: this.itemsDesktopSmall,
        itemsTablet: this.itemsTablet,
        itemsTabletSmall: this.itemsTabletSmall,
        itemsMobile: this.itemsMobile,
        navigation: false,
        slideSpeed: 300,
        pagination: true,
        paginationSpeed: 400,
        singleItem: (this.items || 1) === 1,
        navigationText: ['<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>'],
        autoPlay: false
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function () {
        if (this.widget) {
          this.widget.trigger('destroy.owl.carousel')
          this.widget = null;
        }
        if (this.value && this.value.length > 0) {
          this.$nextTick(() => {
            this.widget = $(this.$el).owlCarousel(this.options)
          })
        }
      }
    }
  }
}

aqui está um exemplo de utilização do componente.:

<owl-carousel :items="3" :items-desktop-small="[1280,3]" :items-tablet="[900,2]" :items-tablet-small="[750,2]" :items-mobile="[600,1]" v-model="items">
    <li v-for="item in items" :key="item._id">
        ...
    </li>
</owl-carousel>

Caso o carousel não tenha itens dinâmicos (que não foi o nosso caso), é interessante que adicione a diretiva v-once a ele. A razão para tal é bem explicada no seguinte artigo.: How To (Safely) Use A jQuery Plugin With Vue.js

<owl-carousel :items="3" :items-desktop-small="[1280,3]" :items-tablet="[900,2]" :items-tablet-small="[750,2]" :items-mobile="[600,1]" v-model="items" v-once>
    <li v-for="item in items" :key="item._id">
        ...
    </li>
</owl-carousel>

No meu caso estava utilizando um template de terceiros, e o tema do mesmo estava bem customizado, então o owl-carousel se tornou um dependência um tanto quanto acoplada.

mas de forma geral, deve-se evitar utilizar componentes baseados em jQuery, afinal o Vue é bastante possessivo quanto à DOM e o jQuery é um terrorista que não respeita isto.

Neste ponto o Vue Awesome é seu amigo.: Carousel

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .