1

Trabajando con Vuetify, me surge la duda de como realizar una paginación de v-card. Teniendo una primera página sencilla de ejemplo como:

<v-col cols="12" xs="12" sm="12" xl="12" md="12" lg="12">
  <v-row>
    <v-col v-for="c in cards" cols="12" xs="12" sm="12" xl="3" md="12" lg="3">
      <v-card>
        <v-card-title>{{c.num}}</v-card-title>
        <v-card-subtitle>{{c.nombre}}</v-card-title>
      </v-card>
    </v-col>
  </v-row>
  <v-row>
    <div class="text-center">
      <v-pagination v-model="page" :length="2"></v-pagination>
    </div>
  </v-row>
</v-col>

Y en JS

data:{
    page:1,
    cards: [
        {"num": 1, "nombre": "n1"},
        {"num": 2, "nombre": "n2"},
        {"num": 3, "nombre": "n3"},
        {"num": 4, "nombre": "n4"},
        {"num": 5, "nombre": "n5"},
        {"num": 6, "nombre": "n6"},
        {"num": 7, "nombre": "n7"},
        {"num": 8, "nombre": "n8"},
        
    ]   
  }

¿Cómo se podría plantear la páginación de v-card?

1 respuesta 1

1

Crea una propiedad computed que contenga las cartas a mostrar y en función de la página filtra las cartas que tienes para mostrar las que corresponden:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page:1,
      length:2,
      cards: [
        {"num": 1, "nombre": "n1"},
        {"num": 2, "nombre": "n2"},
        {"num": 3, "nombre": "n3"},
        {"num": 4, "nombre": "n4"},
        {"num": 5, "nombre": "n5"},
        {"num": 6, "nombre": "n6"},
        {"num": 7, "nombre": "n7"},
        {"num": 8, "nombre": "n8"}
      ]   
    }
  },
  computed: {
  
    shownCards () { 
    
      const { page, length, cards } = this;
      const number = Math.ceil(cards.length / length); // Numero de elementos a mostrar por página
      return cards.slice((page - 1) * number, page * number);
    
    }
  
  }
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">

  <v-app>
  
    <v-container>
    
      <v-col cols="12" xs="12" sm="12" xl="12" md="12" lg="12">
        <v-row>
          <v-col v-for="c in shownCards" :key="c.num" cols="12" xs="12" sm="12" xl="3" md="12" lg="3">
            <v-card>
              <v-card-title>{{c.num}}</v-card-title>
              <v-card-subtitle>{{c.nombre}}</v-card-subtitle>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <div class="text-center">
            <v-pagination v-model="page" :length="length"></v-pagination>
          </div>
        </v-row>
      </v-col>
    
    </v-container>
  
  </v-app>

</div> 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

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.