【发布时间】：2020-08-09 20:26:37
【问题描述】：
我完全卡住了，无法解决我的问题。我的目标是在我的 Vuetify 数据表中显示切换开关的状态。
它似乎有效，但每次我更改切换开关时，所有行的状态都会更改。这不是想法。它需要针对每个特定的行。 小旁注：我更喜欢“开”和“关”，而不是“真”和“假”
当您提出解决方案时，您是否介意告诉我我做错了什么，因为这是我学习的唯一方法。
<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: "+32 50 64 68 62",
email: "marie34@daems.net",
website: "www.daems.net",
to: "http://www.bloomford.be",
location: "Brugge"
},
{
name: "Thomas BVBA",
phone: "+32 9 654 97 31 64",
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>
【问题讨论】：
-
交换机模型是switch1而不是portaal的方式非常令人困惑。另外为什么 switch1 是一个方法和一个数据属性？为什么不直接将交换机绑定到门户？ codeply.com/p/tlXizKP4dD
-
非常感谢您再次提供出色的 cmets 和提示
-
@Codeply-er，你会怎么解决？
-
好的，谢谢。但是现在状态没有显示在对话框中，状态名称不是“开”而不是“真”和“关”而不是“假”。
标签： vue.js vuetify.js