创建记录后无法更新记录 Vue.jsVuetifyAxios

Question

除非我先刷新页面，否则无法更新新创建的记录，我想不通为什么。

流程是这样的。

1) 创建一个新的记录 --> 一切都被发送到db2) 但是假设我在创建记录的过程中犯了一个错误，我想直接改变它。它在前端更新，但在db中没有更新.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>