Display status of toggle switch in vuetify data-table - vue.js

Question

I'm complet stuck and can't see to fix my issue. My goal is to display the status of the toggle switch in my Vuetify data-table.
It seems to work but each time I change the toggle switch the status of all lines get changed. And this isn't the idea. It needs to be for each specific line.
Small side note: Instead of "true" and "false" I would prefer "On" and "off"
When you propose a solution, would you mind also telling me what I'm doing wrong as this is the only way I will learn.
<template>
<v-card>
<v-data-table :headers="headers" :items="companies">
<template v-slot:top>
<v-toolbar flat>
<v-dialog v-model="dialog" max-width="850px">
<template v-slot:activator="{on}">
<v-btn color="primary" dark class="mb-2" v-on="on">Nieuw bedrijf</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="6">
<v-text-field v-model="editedItem.name" label="Bedrijfsnaam"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="6">
<v-switch v-model="switch1" flat :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Annuleer</v-btn>
<v-btn color="blue darken-1" text #click="save">Bewaar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-divider class="mt-3" />
</template>
<template v-slot:item.portaal="{}">
<v-chip color="primary" v-text="switch1" dark></v-chip>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">mdi-pencil</v-icon>
<v-icon small text #click="showDeleteDialog(item)">mdi-delete</v-icon>
</template>
</v-data-table>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title>Delete</v-card-title>
<v-card-text>Weet je zeker dat je {{itemToDelete.name}} wenst te verwijderen?</v-card-text>
<v-card-actions>
<v-btn color="primary" text #click="dialogDelete = false">Annuleer</v-btn>
<v-btn color="primary" text #click="deleteItem()">Verwijderen</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-card>
</template>
Script
<script>
export default {
data: () => ({
headers: [
{ text: "Bedrijfsnaam", align: "start", value: "name" },
{ text: "Portaal", value: "portaal", sortable: false },
{ text: "Actions", value: "actions", sortable: false }
],
companies: [],
switch1: false,
dialog: false,
dialogDelete: false,
itemToDelete: {},
editedIndex: -1,
editedItem: {
name: ""
}
}),
computed: {
formTitle() {
return this.editedIndex === -1
? "Nieuw bedrijf"
: "Bewerk " + this.editedItem.name;
}
},
watch: {
dialog(val) {
val || this.close();
}
},
created() {
this.initialize();
},
methods: {
initialize() {
this.companies = [
{
name: "Bogaert SCA",
phone: "[phone]",
email: "marie34#daems.net",
website: "www.daems.net",
to: "http://www.bloomford.be",
location: "Brugge"
},
{
name: "Thomas BVBA",
phone: "[phone]",
email: "tess.claessens#charlier.org",
website: "www.charlier.org",
to: "http://www.rsca.be",
location: "Gent"
}
];
},
switch1(newValue) {
this.headers[5].value = newValue;
},
editItem(item) {
this.editedIndex = this.companies.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
showDeleteDialog(item) {
this.itemToDelete = item;
this.dialogDelete = !this.dialogDelete;
},
deleteItem() {
const index = this.companies.indexOf(this.itemToDelete);
this.companies.splice(index, 1);
this.dialogDelete = false;
},
close() {
this.dialog = false;
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
}, 300);
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.companies[this.editedIndex], this.editedItem);
} else {
this.companies.push(this.editedItem);
}
this.close();
}
}
};
</script>

Answer 1

You should bind the switch to portaal. Also switch1 should not be a method and a data property. The label doesn't have to be the same as the modal. just use a method for the on/off label...
<v-data-table :headers="headers" :items="companies">
<template v-slot:top>
<v-toolbar flat>
<v-dialog v-model="dialog">
<template v-slot:activator="{on}">
<v-btn color="primary" dark class="mb-2" v-on="on">Nieuw bedrijf</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="6">
<v-text-field v-model="editedItem.name" label="Bedrijfsnaam"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="6">
<v-switch v-model="editedItem.portaal" flat :label="switchLabel(editedItem.portaal)"></v-switch>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Annuleer</v-btn>
<v-btn color="blue darken-1" text #click="save">Bewaar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-divider class="mt-3" />
</template>
<template v-slot:item.portaal="{ item }">
<v-chip color="primary" v-text="switchLabel(item.portaal||false)" dark></v-chip>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">mdi-pencil</v-icon>
<v-icon small text #click="showDeleteDialog(item)">mdi-delete</v-icon>
</template>
</v-data-table>
switchLabel (bool) {
return bool?'on':'off'
},
https://codeply.com/p/tlXizKP4dD