【发布时间】：2020-08-27 01:14:36
【问题描述】：
我无法更新新创建的记录，除非我先刷新我的页面，但我不知道为什么。
工艺流程：
1) 创建一条新记录 --> 一切都被发送到数据库 2）但是假设我在创建记录的过程中犯了一个错误，我想立即更改它。它在前端更新，但不在数据库中。 3）当我刷新页面时，它确实起作用了.....
这是为什么呢？
前端
<template>
<v-app>
<v-app-bar app color="primary" dark></v-app-bar>
<v-content>
<v-container>
<v-row>
<v-col cols="12">
<template>
<v-data-table :headers="headers" :items="companies" class="elevation-1">
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Bedrijven</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<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="12">
<v-text-field
type="text"
v-model="editedItem.name"
label="Bedrijfsnaam"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
type="text"
v-model="editedItem.telephone"
label="Telefoon"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field type="text" v-model="editedItem.email" label="e-Mail"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="12">
<v-text-field
type="text"
v-model="editedItem.website"
label="Website"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
type="text"
v-model="editedItem.location"
label="Locatie"
></v-text-field>
</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">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</template>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
脚本
<script>
import axios from "axios";
export default {
name: "App",
components: {},
data() {
return {
dialog: false,
companies: [],
editedIndex: -1,
editedItem: {
name: "",
telephone: "+32",
email: "@",
website: "",
locatie: ""
},
defaultItem: {
name: "",
telephone: "+32 ",
email: "@",
website: "",
locatie: ""
},
headers: [
{
text: "Bedrijfsnaam",
align: "start",
value: "name",
class: "table-header"
},
{ text: "Telefoon", value: "telephone" },
{ text: "e-Mail", value: "email" },
{ text: "Website", value: "website" },
{ text: "Locatie", value: "location" },
{ text: "Acties", value: "actions" }
]
};
},
computed: {
formTitle() {
return this.editedIndex === -1 ? "Nieuw Bedrijf" : "Bewerk Bedrijf";
}
},
watch: {
dialog(val) {
val || this.close();
}
},
created() {
this.initialize();
},
methods: {
async initialize() {
try {
const res = await axios.get(
"http://localhost:8888/api_test/config-panel/client.php?method=getData"
);
this.companies = res.data.data;
} catch (e) {
console.error(e);
}
},
editItem(item) {
this.editedIndex = this.companies.indexOf(item);
this.editedItem = Object.assign({}, item);
this.editedID = this.editedItem.ID;
this.dialog = true;
console.log(this.editedID);
},
async deleteItem(item) {
if (confirm("Do you really want to delete?"))
try {
let res = await axios.delete(
"http://localhost:8888/api_test/config-panel/client.php?method=deleteCustomer",
{ params: { id: item.ID } }
);
const index = this.companies.indexOf(item);
this.deletedItem = Object.assign({}, item);
this.deletedID = this.deletedItem.ID;
this.companies.splice(index, 1);
this.response = res;
console.log(res);
} catch (e) {
console.error(e);
}
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
async save() {
if (this.editedIndex > -1) {
Object.assign(this.companies[this.editedIndex], this.editedItem);
try {
let res = await axios.post(
"http://localhost:8888/api_test/config-panel/client.php?method=updateCustomer",
{
id: this.editedItem.ID,
name: this.editedItem.name,
telephone: this.editedItem.telephone,
email: this.editedItem.email,
website: this.editedItem.website,
location: this.editedItem.location
}
);
this.res = res;
console.log(res);
} catch (e) {
console.error(e);
}
} else {
this.companies.push(this.editedItem);
try {
let res = await axios.put(
"http://localhost:8888/api_test/config-panel/client.php?method=createCustomer",
{
name: this.editedItem.name,
telephone: this.editedItem.telephone,
email: this.editedItem.email,
website: this.editedItem.website,
location: this.editedItem.location
}
);
console.log(res);
} catch (e) {
console.log(e.response);
}
}
this.close();
}
}
};
</script>
【问题讨论】：
标签： mysql vue.js axios vuetify.js