How to modify items based on selected items on vuetify data table-CodePudding

Lets the items are:

desserts: [
     {
       name: 'Frozen Yogurt',
       calories: 159,
       fat: 6.0,
       carbs: 24,
       protein: 4.0,
       iron: '1%'
    },
    {
       name: 'Ice cream sandwich',
       calories: 237,
       fat: 9.0,
       carbs: 37,
       protein: 4.3,
       iron: '1%'
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%'
    }
]

I want to add additional property with all objects such as isActive: true or isActive: false based on the selection. So, if user select Frozen Yogurt & Ice cream sandwich columns and click on a custom button, Add Selected button, I should get the array of the objects like this way:

desserts: [
         {
           name: 'Frozen Yogurt',
           calories: 159,
           fat: 6.0,
           carbs: 24,
           protein: 4.0,
           iron: '1%',
           isActive: true
        },
        {
           name: 'Ice cream sandwich',
           calories: 237,
           fat: 9.0,
           carbs: 37,
           protein: 4.3,
           iron: '1%',
           isActive: true
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          isActive: false
        }
    ]

Are there any vuetify way to do this? Or should we do this with pure javascript in the custom function bind with the click event:

<v-btn
   @click="sendData"
  >
    Add Selected
</v-btn>

How to do this efficiently?

.... UPDATE: .......

I think I have achieved the desired output at console.log(submittedData). but I think my sendData function is a bit complicated now. Can you please help me to simplify it?

Codepen Demo

CodePudding user response：

Looping through desserts
spread each item with a new isActive property
assign Boolean return value from the .includes method to isActive

sendData() {
      let result = this.desserts.map((item) => 
          ({ ...item, isActive: this.selected.includes(item) }));
      console.log(result);
    }

Code Pen Demo