在vuetify数据表中显示切换开关的状态

Question

我完全被卡住了，无法解决我的问题。我的目标是在Vuetify数据表中显示切换开关的状态。

它似乎有效，但每次我更改切换开关时，所有行的状态都会发生变化。但事实并非如此。它需要针对每一条特定的线路。小提示：比起"true"one_answers"false"，我更喜欢"On"one_answers"off">

当你提出解决方案时，你介意告诉我我做错了什么吗？因为这是我学习的唯一途径。

<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>
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: "[e-mail]",
website: "www.daems.net",
to: "http://www.bloomford.be",
location: "Brugge"
},
{
name: "Thomas BVBA",
phone: "[phone]",
email: "[e-mail]",
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

您应该将开关绑定到portaal。此外，switch1不应该是方法和数据属性。标签不必与模态相同。只需使用打开/关闭标签的方法。。。

<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