Vuetify: Data table slot value to toggle another slot value - vue.js

Question

I am using a Vuetify data table and I am using v-slot:item on two of the columns to insert switches.
<v-data-table
:headers="headers"
:items="records"
:search="search"
:items-per-page="5"
>
<template v-slot:item.monitor="{ item }">
<v-switch v-model="item.monitor" color="success"></v-switch>
</template>
<template v-slot:item.manage="{ item }">
<v-switch v-model="item.manage" color="success"></v-switch>
</template>
</v-data-table>
What I want to do is set the switches like an Item Group so that only one may be selected (on) at a time, but both can be false (off). So only one can have a true value.
I have tried using the Item Group component and got that to work, but I am not sure if it is even possible within the table the way I want since these two switches are in separate slots. I am under the impression that the v-item should be sibling components, so that makes me think that would't work for this situation.

Answer 1

The way I see it, there are two different approches to this problem. You can either:
Watch the records array to detect changes in either monitor or manage attributes of one of its objects.
Do not use v-model directive on the switches but provide a readonly value, then change it manually on click.
I prefer the second option. You can do it like so:
Template section
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="records">
<template v-slot:item.monitor="{ item }">
<v-switch
:input-value="item.monitor"
readonly
color="success"
#click.stop="setSwitchesForItem(item.id, 'monitor', !item.monitor)"
/>
</template>
<template v-slot:item.manage="{ item }">
<v-switch
:input-value="item.manage"
readonly
color="success"
#click.stop="setSwitchesForItem(item.id, 'manage', !item.manage)"
/>
</template>
</v-data-table>
</v-app>
</div>
A couple of things to note here:
v-model has been replaced by :input-value
readonly props has been set
the click event calls a custom method. It requires the .stop suffix because of a bug documented here
Script section
export default {
// ...
data() {
return {
headers: [
{ text: "Name", value: "name" },
{ text: "Monitor", value: "monitor" },
{ text: "Manage", value: "manage" }
],
records: [
{
id: 1,
name: "Item 1",
monitor: true,
manage: false
},
{
id: 2,
name: "Item 2",
monitor: false,
manage: true
},
{
id: 3,
name: "Item 3",
monitor: false,
manage: false
}
]
};
},
methods: {
setSwitchesForItem(itemId, attributeName, attributeValue) {
const record = this.records.find(r => r.id === itemId);
// In case the new value is true, we need to make sure the other one is set to false
if (attributeValue) {
record[attributeName === "monitor" ? "manage" : "monitor"] = false;
}
record[attributeName] = attributeValue;
}
}
}
Link to the Codepen.