1

Realizando una aplicación con Vue y Vuetify donde genero v-cards según un array de objetos, sin realizar la paginación de los v-cards no tengo problema, ya que el v-model lo construyo con el mismo array su índice, ahora al agregar la paginación, lo hago de la siguiente manera:

<v-col v-for="(item,index) in pagProductes" cols="12" xs="6" sm="6" md="3" xl="3" lg="3">
  <v-card>
    <v-img :src="pathImage(item.imatge)"></v-img>
    <v-card-title class='pb-0'>{{item.nom}} - {{item.preu}}€</v-card-title>
    <v-card-subtitle class='my-0 py-0'>Categoria: {{item.categoria}}</v-card-subtitle>
    <v-card-text class='mt-0 py-0'>Ref: {{item.referencia}}</v-card-text>
    <v-card-actions class='mt-4 py-0'>
      <v-text-field outlined v-model='pagProductes[index].qini' label='Quantitat' placeholder="Quantitat"></v-text-field>
      <v-btn icon color='grey' @click="afegiralcarret(index)"> <v-icon> mdi-cart</v-icon></v-btn>
    </v-card-actions>
  </v-card>
</v-col>

//Para crear la navegación de la paginación

<div class="text-center">
  <v-pagination v-model="page" :length="long" :total-visible="long"></v-pagination>
</div>

Con la propiedad computada pagProductes:

pagProductes() {
  const number = 8;
    return this.cataleg.slice((this.page - 1) * number, this.page * number);
}

Como en cada página tengo 8 v-cards, cuando voy seleccionando con el método afegiralcarret(index), en la primera página no tengo problema, pero por ejemplo al seleccionar el v-card 20 (el 4 de la tercera página) vuelve a seleccionar el v-card 4, que es el index 4.

He pensado en generar una propiedad computada para crear el índice de v-model tal que así:

productIndex(index){
  //this.long = 8
  return (this.page-1)*this.long + index;
}

Y con esto en el v-model del v-for hacer:

<v-text-field outlined v-model='pagProductes[productIndex].qini' label='Quantitat' placeholder="Quantitat"></v-text-field>

Pero obtengo un error, donde me indica que qini no está definido,el índice no es correcto, ¿cuál sería la manera correcta de calcular este index y poder crear el v-model de la forma correcta?

4
  • 1
    ¿Cómo generas this.cataleg? Podrías agregar la propiedad index a cada elemento y no usar la posición del arreglo, porque array.slice() te devuelve un nuevo arreglo, con sus propios índices.
    – Triby
    Commented el 19 ene. 2021 a las 16:46
  • Genero this.cataleg con una llamada fetch, obtengo un json. Con el slice se generan nuevos índices, he pensado en crear el v-model, a partir de la referencia y guardar ahí la cantidad.
    – Vicent
    Commented el 19 ene. 2021 a las 19:55
  • 1
    He resuelto el problema como has comentado Triby.
    – Vicent
    Commented el 25 ene. 2021 a las 13:38
  • ¡Excelente! Sería bueno que publiques la respuesta con la solución (código), así otros usuarios con el mismo problema sabrán qué hacer.
    – Triby
    Commented el 25 ene. 2021 a las 15:23

1 respuesta 1

1

Con la idea de Triby, he generado un array con el índice del producto, y en lugar de utilizar this.cataleg para el v-model que utilizaba en la paginación utilizo este nuevo array. El problema lo tenía que al realizar la paginación (con slice) el índice del array cambiaba. Con esto:

<v-col v-for="(item,index) in pagProductes" :key='item.id' cols="12" xs="6" sm="6" md="3" xl="3" lg="3">
  <v-card>
    <v-img :src="pathImage(item.imatge)"></v-img>
    <v-card-title class='pb-0'>{{item.nom}} - {{item.preu}}€</v-card-title>
    <v-card-subtitle class='my-0 py-0'>Categoria: {{item.categoria}}</v-card-subtitle>
    <v-card-text class='mt-0 py-0'>Ref: {{item.referencia}}</v-card-text>
    <v-card-actions class='mt-4 py-0'>
      <v-text-field outlined v-model='ncataleg[item.id].qini' label='Quantitat' placeholder="Quantitat"></v-text-field>
      <v-btn icon color='grey' @click="afegiralcarret(item.id)"> <v-icon> mdi-cart</v-icon></v-btn>
    </v-card-actions>
  </v-card>
</v-col>

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.