Making an application with Vue and Vuetify where I generate v-cards according to an array of objects, without paging the v-cards I have no problem, since the v-model is built with the same array and its index, now when adding the pagination, I do it as follows:
<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>
With the computed property pagProductes:
pagProductes() {
const number = 8;
return this.cataleg.slice((this.page - 1) * number, this.page * number);
}
As in each page I have 8 v-cards, when I select with the afegiralcarret(index) method, on the first page I have no problem, but for example when selecting v-card 20 (4 on the third page) it selects again the v-card 4, which is the index 4.
I have thought of generating a computed property to create the v-model index like so:
productIndex(index){
//this.long = 8
return (this.page-1)*this.long + index;
}
And with this in the v-model of the v-for do:
<v-text-field outlined v-model='pagProductes[productIndex].qini' label='Quantitat' placeholder="Quantitat"></v-text-field>
But I get an error, where it tells me that qini is not defined, the index is not correct, what would be the correct way to calculate this index and be able to create the v-model correctly?
With Triby's idea, I have generated an array with the product index, and instead of using this.cataleg for the v-model that I used in pagination, I use this new array. The problem was that when paging (with slice) the index of the array changed. With this: