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?
this.cataleg
? Podrías agregar la propiedadindex
a cada elemento y no usar la posición del arreglo, porque array.slice() te devuelve un nuevo arreglo, con sus propios índices.