Javascript 在Vue js中使用axios会丢失对象的属性

我正在使用axios，我不明白为什么对象的某些属性会丢失。请看这段代码

<template>
  <div>
    <v-message-box :data="mBox" />
    <v-data-table :headers="headers" :items="items" sort-by="calories" class="elevation-1">
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Coplaint list</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click="btnNewItem" dark class="mb-2">New Item</v-btn>
          <v-dialog v-model="dialog" max-width="500px">
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-complaint :complaint="editedItem" />
              </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>
  </div>
</template>

<script>
import vComplaint from "../create/v-complaint";
import Api from "@/api/Api";
import vMessageBox from "../commons/v-message-box";
import MessageBox from "../commons/messagebox.js";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "v-complaint-table",
  data: () => ({
    dialog: false,
    headers: [],
    items: [],
    editedIndex: -1,
    editedItem: {},
    defaultItem: null,
    mBox: new MessageBox(),
  }),
  props: ["patient"],

  methods: {

    // Some functions ....
    editItem(item) {
      this.editedIndex = this.items.indexOf(item);
      this.editedItem = this.toObject(item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.items.indexOf(item);
      confirm("Are you sure you want to delete this item?") &&
        this.items.splice(index, 1);
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      let mBox = this.mBox
      if (this.editedIndex > -1) {
        let complaint = this.editedItem;
        Api()
          .put("/complaint_request", {
            complaint
          })
          .then(() => {
            console.log("Updated");
          })
          .catch(e => {
            mBox.showMessage("Error", e, "error");
            console.log(e);
          });
        Object.assign(
          this.items[this.editedIndex],
          this.toTemplate(this.editedItem)
        );
      } else {
        var complaint = this.editedItem;
        var _this = this
        console.log(this.editedItem)
        Api()
          .post("/complaint_request", {
            complaint
          })
          .then(respone => {
            _this.editedItem.id = respone.data;
            console.log(_this.editedItem)
            _this.items.push(this.toTemplate(_this.editedItem));
          })
          .catch(e => {
            mBox.showMessage("Error", e, "error");
            console.log(e);
          });
      }
      this.close();
    },
};
</script>

在

close（）

中，指定

this.editedItem = Object.assign({}, this.defaultItem);

由于在

save

中的承诺解析之前调用了

this.close

，因此

this.editem

将重置为

this.defaultItem

，我假设它缺少日期

因此，最好在promise

中调用
close
，然后调用
callback

编辑：修复名称
代码乍一看很好。。。可能是此
的范围界定问题。需要查看更多的代码才能确定，但在调用API之前，您可以尝试设置一个变量来维护您的范围，例如
var\u this=this然后，在.Then（）响应中，改用这个。根据我所看到的，这只是一个暗中拍摄。您正在将响应设置为用户的id。我不知道您是否希望这样做
this.editem.id=respone.data
将
console.log（this.editem）
更改为
console.log（JSON.stringify（this.editem））
，我打赌您会看到一些更改。控制台不是调试工具。我建议您改用浏览器的JavaScript调试器。对于这个可以理解的问题，我很抱歉，这是vue js。我正在尝试向服务器发送一个新实例以进行创建，服务器会发回已创建实例的id（我是web编程新手，所以我看不到其他选项）。我将创建的实例的id放在客户端（编辑或删除）。我在问题中添加了一些代码。很抱歉，
var\u this=this
不起作用。但是我不明白为什么
close
方法在完成
if。。其他
语句？异步？实际上，
.then
回调发生在
if…else
语句之后@穆苏尔蒙。（关闭方法仍然发生在if/else之后。）
this.editedItem = Object.assign({}, this.defaultItem);