I have rows of v-cards wrapped inside v-cols which are all then wrapped inside a v-data-itetator now i got two problems
-
The index of selected card does not reflect the index of the same item in the array that was passed to the items props as the source of truth.This changes with each page.
-
When you click a card in one page another card in the same position but in the consecutive pages also get selected.
<v-card-subtitle> <div class="grey--text">@</div> <div class="grey--text text--darken-4"></div> </v-card-subtitle> <v-card-text> <div class="grey--text text--darken-4"> <span class="grey--text text-caption">following</span> <span class="grey--text text-caption" >followers</span> </div> <div> <v-chip class="ma-2" color="indigo" text-color="white"> <v-icon left>mdi-account-multiple-check</v-icon>assigned </v-chip> </div> </v-card-text> <!-- <v-divider></v-divider> --> <v-card-actions> <v-row class="ma-3 text-sm grey--text"> <div> <v-icon small left>mdi-twitter</v-icon> <span class="grey--text text--darken-4"></span> tweets </div> <v-spacer></v-spacer> <div class="text-subtitle-1"> <v-icon small left color="secondary">mdi-calendar-month-outline</v-icon> <span class="grey--text text--darken-4">Joined</span> </div> </v-row> </v-card-actions> </v-card> <v-card :color="active?'secondary':''" class="ma-4" align="center" @click.stop="assign(toggle)" v-else > <v-responsive class="pt-4"> <v-avatar size="100" class="grey lighten-2"> <img :src="item.profile" /> </v-avatar> </v-responsive> <v-card-subtitle> <div class="grey--text">@</div> <div class="grey--text text--darken-4"></div> </v-card-subtitle> <v-card-text> <div class="grey--text text--darken-4"> <span class="grey--text text-caption">following</span> <span class="grey--text text-caption" >followers</span> </div> <div> <v-chip class="ma-2" text-color="grey"> <v-icon left>mdi-account-multiple-remove</v-icon>unasssigned </v-chip> </div> </v-card-text> <!-- <v-divider></v-divider> --> <v-card-actions> <v-row class="ma-3 text-sm grey--text"> <div> <v-icon small left>mdi-twitter</v-icon> <span class="grey--text text--darken-4"></span> tweets </div> <v-spacer></v-spacer> <div class="text-subtitle-1"> <v-icon small left color="secondary">mdi-calendar-month-outline</v-icon> <span class="grey--text text--darken-4">Joined</span> </div> </v-row> </v-card-actions> </v-card> </v-item> </v-col> </v-row> </v-container> </v-item-group> </template> <template v-slot:footer>
And my vue instance looks like this
export default {
name:"App",
components:{Playground},
data() {
return {
avatarsPerPage: 4,
avatarsPerPageArray: [4, 8, 12, 16, 20, 24, 28, 32,],
search: "",
filter: {},
sortDesc: false,
page: 1,
sortByHandle: "handle",
selected: [],
assignDialog: false,
team: [
{
id: 1,
firstname: "Evanson ",
lastname: "Mwangi",
avatars: 120,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
{
id: 2,
firstname: "Marcus",
lastname: "Mwangi",
avatars: 320,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
{
id: 3,
firstname: "Mercy ",
lastname: "Orangi",
avatars: 620,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
{
id: 4,
firstname: "Millicent",
lastname: "Achieng",
avatars: 120,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
{
id: 5,
firstname: "Edward",
lastname: "Kitili",
avatars: 80,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
{
id: 6,
firstname: "Changaresi",
lastname: "Mugamura",
avatars: 60,
createdAt: "May 26, 2020 10:09am",
followers: 780,
following: 300,
likes: 600,
tweets: 500,
},
...
],
avatars: [
{
handle: "mwasyakyalo",
bio: "Real distance trader | A woman of her word",
following: 323,
followers: 230,
likes: 710,
tweets: 3600,
joined: "April 2010",
profile: "/avatar-3.png",
assigned: true,
},
{
handle: "catemukami",
bio: "Staunch Kikuyu | Lover of fine things",
following: 324,
followers: 710,
likes: 300,
tweets: 4300,
joined: "April 2010",
profile: "/avatar-4.png",
assigned: true,
},
{
handle: "mainakamandaelder",
bio: "For the people by the people",
following: 340,
followers: 349,
likes: 490,
tweets: 1230,
joined: "April 2010",
profile: "/avatar-5.png",
assigned: true,
},
{
handle: "salmakambo",
bio: "Maji yakimwagika hayazoleki | Leave the past to be ",
following: 710,
followers: 800,
likes: 1020,
tweets: 558,
joined: "April 2010",
profile:
"https://pbs.twimg.com/profile_images/1277896115342528512/uNVpTeIW.jpg",
assigned: false,
},
],
};
},
computed: {
numberOfPages() {
return Math.ceil(this.avatars.length / this.avatarsPerPage);
},
showAssign() {
return this.selected.length > 0;
},
members() {
const names = [];
this.team.forEach((member) =>
names.push(member.firstname + " " + member.lastname)
);
return names;
},
// filteredKeys() {
// return this.keys.filter((key) => key !== `Name`);
// },
},
methods: {
nextPage() {
if (this.page + 1 <= this.numberOfPages) this.page += 1;
},
formerPage() {
if (this.page - 1 >= 1) this.page -= 1;
},
updateAvatarsPerPage(number) {
this.avatarsPerPage = number;
},
sortAscendingBy(prop) {
this.avatars.sort((a, b) => (a[prop] < b[prop] ? -1 : 1));
},
sortDescendingBy(prop) {
this.avatars.sort((a, b) => (a[prop] > b[prop] ? -1 : 1));
},
assign(e) {
/**eslint-disable */
console.log(e(this),this.selected);
},
},
};
I would want to get the real index of the selected Item as in the array passed to items props. such that in whatever page I am and select the index I get is the same as in the items props.
Below is a link to reproduce my issue. Any help is highly appreciated. https://codesandbox.io/s/twitter-dashboard-v2ndg?file=/src/App.vue
Aucun commentaire:
Enregistrer un commentaire