Entonces, tengo un tablero donde quiero mostrar algunas tarjetas. Solo debe haber cuatro visibles a la vez y al hacer clic en la flecha solo desea avanzar un paso a la siguiente tarjeta. Entonces, digamos que se muestran las tarjetas 1-4 y al hacer clic en la flecha derecha, debería poder ver 2-5. En este momento solo tengo que cuando haces clic en la flecha derecha, saltas el pase 1-4 y vas directo al 5-10.
Así que ahora mismo tengo esto:
computed: { cardsToDisplay(): Status[] { return this.cards.slice(this.page * 4, (this.page + 1) * 4) }, }, methods: { setCards(no: number) { this.page = this.page + delta }, },Y en la plantilla, los botones de flecha izquierda y derecha se ven así:
<v-icon v-if="page !==" class="black--text font-weight-bold" @click="setPage(-1)"> chevron_left</v-icon> <v-icon v-if="columns.length > (page + 1) * 4" class="black--text font-weight-bold" @click="setPage(1)" >chevron_right</v-icon >Pero, ¿cómo puedo hacer que pase a la siguiente carta? :)
Solo haz
computed: { cardsToDisplay(): Status[] { return [...this.cards, ...this.cards].slice(this.cards_pos, this.cards_pos + 4) }, }, methods: { prev() { this.cards_pos = (this.cards_pos + this.cards.length - 1) % this.cards.length; }, next() { this.cards_pos = (this.cards_pos + 1) % this.cards.length; }, }, Con [...this.cards, ...this.cards] te aseguras de que el carrusel sea cíclico sin mucho código.
Con el operador restante, se asegura de que su card_pos sea siempre menor que el número de tarjetas. Con la disminución, debe agregar la longitud de la matriz para evitar entrar en los negativos.
Vue.createApp({ data: () => ({ cards_pos: 0, cards: new Array(10).fill(null).map((e, i) => ({ img: "https://picsum.photos/id/" + (i * 10) + "/200", text: "Card #" + (i + 1) })) }), computed: { cardsToDisplay() { return [...this.cards, ...this.cards].slice(this.cards_pos, this.cards_pos + 4) }, }, methods: { prev() { this.cards_pos = (this.cards_pos + this.cards.length - 1) % this.cards.length; }, next() { this.cards_pos = (this.cards_pos + 1) % this.cards.length; }, }, }).mount("#app") .cards { display: flex; list-style: none; padding: 0; margin: 0; width: 100%; } .cards > * { width: 25%; } .cards > * img { width: 100%; } <script src="https://unpkg.com/vue@next"></script> <div id="app"> <button @click="prev"> << </button> <button @click="next"> >> </button> <ol class="cards"> <li v-for="card in cardsToDisplay"> <img :src="card.img" /> <p> {{ card.text }} </p> </li> </ol> </div>