Hola, estoy usando el componente "carousel" de Buefy con Vue.js. En resolucion de laptop tengo que se muestren 3 items. Pero en el movil quiero que se muestre un item. hice una funcion que depende de la resolucion se cambie la propiedad del carousel "items-to-show" de 3 a 1. Pero lo malo que esa propiedad se carga cuando se inicia la pagina no cuando cambia la pantalla.
Tienen algun consejo de como hacerlo ? No quiero tener que recargar la pagina para que suceda. Pero al menos recargar el componente.
<section id="app">
<h1 class="title is-1">{{ titulo }}</h1>
<p class="subtitle is-5">{{ subtitulo }}</p>
<div class="container" id="id">
<b-carousel-list v-model="test" :data="items" :items-to-show="valor" :items-to-list="3" icon-size="is-large">
<template slot="item" slot-scope="props">
<div class="card redondo">
<div class="card-image">
<figure class="image is-5by4">
<a @click="info(props.index)"><img :src="props.list.image" class="imagen-redondo"></a>
</figure>
</div>
<div class="card-content">
<div class="container">
<h3 class="Laboratorio-Centro" >{{ props.list.title }}</h3>
<div class="columns is-mobile">
<div class="column is-1 ">
<figure class="image is-16x16">
<img src="../assets/img/location.png">
</figure>
</div>
<div class="column">
<p class="Av-9-de-Octubre-170">{{ props.list.subtitle}}</p>
</div>
</div>
<div class="boton-plus2"> <img src="../assets/img/icon-more.png" @click="isCardModalActive = true" class="plus2">
</div>
</div>
</div>
</div>
</template>
</b-carousel-list>
</div>
</section>
methods: {
info(value) {
this.test = value
},
cambiar() {
return this.test = 0;
},
itemMostrar() {
if ($(window).width() < 720) {
return this.valor = 1;
} else {
return this.valor = 3;
}
},
},