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

Question

I currently have some cards that each hold a value. I want to basically make each card act like a toggle button and when the card is toggled on I want that cards value to be added to the array.

I currently use:

@click="selectableCards( {Group: `${user.GroupHex}`, UserID: user.UserIDInt, SuperID: `${user.SuperID}`} )"

to pass the data to my function:

selectableCards(x) {
      if(this.array.includes(x)) {

        console.log('prop already exists inside array')

      } else {

       this.array.push(x)

      }
        console.log(this.array)
    }

Whenever I use this the object is added to the array but it will allow me to add the same object over and over again. It doesn't detect that the object is already in the array.

So again basically I want the @click on the card to act like a toggle button to add or remove the data inside the card.

An example of 3 cards values into an array:

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

yes all of them are unique. an example of a few: [ { "Group": "10", "UserID": 6, "SuperID": "2566" }, { "Group": "10", "UserID": 5, "SuperID": "2565" }, { "Group": "20", "UserID": 9, "SuperID": "5129" } ] — Yewla, Mar 12 '20 at 14:19
simplest solution, just send a string to `selectableCards` (`@click="selectableCards(user.UserID)"`) otherwise you'll have to re-write selectableCards to check all the keys in an object — depperm, Mar 12 '20 at 14:20
Im not sure I understand fully but I do need this data in a JSON Like format to later use in cloud functions and firestore — Yewla, Mar 12 '20 at 14:22

score 2 · Accepted Answer · answered Mar 12 '20 at 14:40

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);

score 1 · Answer 2 · answered Mar 12 '20 at 14:38

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

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

2 Answers2