[Vuejs]-Make v-card selectable/toggle-able and pass an object to an array in Vue

by

2👍

✅

You cannot cannot compare objects same way as primitives in javascript:

const objects = [ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ]

console.log(objects.includes({ "Group": "10", "UserID": 6, "SuperID": "2566" }))

For more information about that take a look here: Object comparison in JavaScript

However what you can do is to search for an element in an array based on some conditions for example with array.find() -method like so:

const objects = [ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ];

const matchedObject = objects.find((object) => {
  return object.Group === "10" &&
    object.UserID === 6 && 
    object.SuperID === "2566"
});

console.log(matchedObject);
👤Mischa

1👍

If you just need to know if a card is selected send a string/number to selectableCards instead of an object and your function doesn’t have to change.

@click="selectableCards(user.UserID)"
OR
@click="selectableCards(user.SuperID)"

If however you need to store the object I would recommend using findIndex instead of includes

if(this.array.findIndex(temp => {
    return temp.Group == x.Group && temp.UserID == x.UserID && temp.SuperID == x.SuperID
})>-1)
...the rest of the code is unchanged
👤depperm

Leave a comment