Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

250
Visualizações
Reload vue-owl-carousel after dynamic data update

Initialized a vue-owl-carousel using dynamic data

<script>

import carousel from 'vue-owl-carousel'

export default {
    components: { carousel },
}
<carousel :items="1">
    <img v-for="(img, index) in images" :src="img" :key="index">
  </carousel>


 data: function() {
    return {
      images: [
        "https://placeimg.com/200/200/any?1",
        "https://placeimg.com/200/200/any?2",
        "https://placeimg.com/200/200/any?3",
        "https://placeimg.com/200/200/any?4"
      ]
    };
  }

Removed one of images from the images array

How to update the owl carousel with new images array?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

This should work with normal reactivity so im guessing the way how the carousel library is built is just sloppy. My advice is to just build your own carousel. It is really not that and can be a good learning curve.

Nevertheless if you really want to use this library, you could wrap the carousel in a template with a v-if condition. Because when deleting a entry from the images array the carousel needs to be rerendered to show its changes. You can force this by deleting and adding the component to the DOM by toggling the v-if of the template tag. A hacky solution to a problem that shouldnt exist in the first place. But something like this would work:

<template>
  <div id="app">
    <template v-if="toggle">
      <carousel :items="1">
        <template v-for="(img, index) in images">
          <img :src="img" :key="index" />
        </template>
      </carousel>
    </template>

    <button @click="deleteImage">DELETE A IMAGE</button>
  </div>
</template>

<script>
import Carousel from "vue-owl-carousel";
export default {
  name: "App",
  components: { Carousel },
  data() {
    return {
      images: [
        "https://placeimg.com/200/200/any?1",
        "https://placeimg.com/200/200/any?2",
        "https://placeimg.com/200/200/any?3",
        "https://placeimg.com/200/200/any?4",
      ],
      toggle: true,
    };
  },
  methods: {
    deleteImage() {
      this.toggle = false;
      this.images.pop();
      this.$nextTick(() => {
        this.toggle = true;
      });
    },
  },
};
</script>

Ive tested it and it works with the vue-owl-carousel library see sandbox

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda