0

tengo un slider owl-carousel,

<div class="bg-secondary bg-size-cover mb-grid-gutter" 
     style="background-image: url(img/home/electronics/hero-main-bg.jpg);">
    <div class="owl-carousel" 
          data-owl-carousel="{ &quot;nav&quot;: true, &quot;dots&quot;: false, &quot;loop&quot;: true, &quot;autoHeight&quot;: true, &quot;autoplay&quot;: true, &quot;autoplayTimeout&quot;: 5500 }">
            <div class="row align-items-center " v-for="item in 5">
                <div class="col-md-5">
                </div>
                <div class="col-md-7">
                </div>
            </div>
    </div>
  </div>

al cual le hago un recorrido hasta 5 veces y funciona correctamente introducir la descripción de la imagen aquí

pero si al v-for recorro un array que viene desde mi controlador de laravel pasa esto: introducir la descripción de la imagen aquí

lo que intento hacer es simplemente esto v-for="item in items", Como dije anteriormente items viene desde una respuesta de mi servidor, que se carga correctamente, pero por alguna razon no renderiza correctamente, y lo unico que hago es reemplazar el 5 por items Probe inicializar mi array de esta forma:

items: [1, 2, 3, 4, 5]

y funciona, pero no puedo utilizarlo asi por que el slider debe ser dinamico y si no inicializo mi array con la cantidad que viene desde el controlador el diseño tambien se rompe. No tengo idea de que esta pasando, ya estoy 2 días por el, disculpen por las imagenes pero no se me ocurrio otra forma mas simple de explicar mi problema,

ACTUALIZACION

<div class="owl-stage-outer owl-height">
     <div class="owl-stage">
          <div class="owl-item cloned">
               <div class="row align-items-center py-5">
               </div>
          </div>
     </div>  
</div>

en la consola aparece estos 3 divs que envuelven al div al cual le hago el v-for.

9
  • Fijate en las vistas renderizas con y sin el v-for. Vas a ver que estas repitiendo cosas (como divs) que no deberian estar dentro del v-for.. si mostras esas partes, tal vez podamos ayudarte.
    – gbianchi
    el 28 ene. 2020 a las 18:23
  • pero cuando hago el v-for="item in 5" funciona correctamente.. lo unico que cambio es el 5 por un array, todo el codigo ya lo publique. el 28 ene. 2020 a las 18:34
  • porque, item in 5 no es nada, entonces no hace un v-for ;).. es mas, ese v-for se debe estar quejando que no hay un key definido. Vos estas seguro que anda? o solo parece que anda? no tenes errores en la consola? apreta f12 y fijate si vue no se queja de muchas cosas... de donde venga el array no importa.. podrias simplemente escribir numeros, para verificar que relamente ves lo que queres ver...
    – gbianchi
    el 28 ene. 2020 a las 18:47
  • no tengo ningun error en la consola, tambien probe ´ v-for="(item, index) in items" :key="index"' ´, que me da el mismo resultado. esto es realmente frustrante el 28 ene. 2020 a las 18:56
  • pero si uso de esta forma funciona: ´ v-for="(item, index) in 5" :key="index"' ´ el 28 ene. 2020 a las 18:57

1 respuesta 1

1

Despues de 2 dias encontre la solucion, que en realidad es muy simple, mi array se cargaba despues del slider y este ultimo ya no se volvia a actualizar.. por lo que destruir y llamar de nuevo al slider fue la solucion

$(".carousels").owlCarousel('destroy');
    $(".carousels").owlCarousel({
        autoWidth:true,
        loop:true,
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.