Vue.js POST和PUT请求中存在问题，使用axios、vuetify datatable、vuejs

我正试图通过实现axios来使用我的api，根据我的需要调整vuetify网站本身的示例数据表。GET AND DELETE方法工作得很好，但是我对POST AND PUT方法感到非常困惑，我使用了两个模型作为客户机以及与流派的关系，部分代码如下：

<template>
    <v-data-table
      :headers="headers"
      :items="clients"
      sort-by="firstName"
      class="elevation-2"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-icon medium>mdi-account-supervisor</v-icon>
            <v-toolbar-title> Clients</v-toolbar-title>
          <v-divider
            class="mx-4"
            inset
            vertical
          ></v-divider>
          <v-spacer></v-spacer>
          <v-dialog v-model="dialog" max-width="600px">
            <template v-slot:activator="{ on }">
                <v-btn 
                color="blue" 
                dark class="mt-6 mb-4" 
                v-on="on"
                rounded
                ><v-icon medium>mdi-plus</v-icon>Add new</v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-container>
                  <v-form>
                    <v-row>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.firstName" label="First Name"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.lastName" label="Last Name"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.email" label="E-Mail"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.phone" label="Phone"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.mobilePhone" label="Mobile Phone"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <!-- select options-->
                        <v-select
                          label='Gender'
                          v-model='editedItem.gender.name'
                          :items='genders'
                          item-value='name'
                          item-text='name'
                        >
                        </v-select>
                      </v-col>
                    </v-row>
                  </v-form>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" rounded @click="close">Cancel</v-btn>
                <v-btn color="primary" rounded @click="save">Save</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <template v-slot:item.action="{ item }">
        <v-icon
          small
          color="green"
          class="mr-2"
          @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
          small
          color="red"
          @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>

<script>
import axios from 'axios'
import Client from '../../services/clients';
import Gender from '../../services/genders';

  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      clients: [],
      genders: [],
      errors: [],
      editedIndex: -1,
      editedItem: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        mobilePhone: '',
        gender: '',
      },
      defaultItem: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        mobilePhone: '',
        gender: '',
      },
    }),
    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },
    watch: {
      dialog (val) {
        val || this.close()
      },
    },
    created () {
      this.initialize()
    },
    methods: {
      initialize () {
        Client.list().then(response => {
          this.clients = response.data
        }).catch(e => {
          console.log(e)
        });
        Gender.list().then(response => {
          this.genders = response.data
        }).catch(e => {
          console.log(e)
        });

      },
      editItem (item) {
        axios.put('http://192.168.26.130:3000/client/' + item.id)
          .then(response => {
            this.editedIndex = this.clients.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.editedID = this.editedItem.id
            this.dialog = true
            this.response = response
        }).catch(e => {
          console.log(e)
        });
      },

      deleteItem (item) {
        if (confirm("Do you really want to delete?")) {
          axios.delete('http://192.168.26.130:3000/client/' + item.id)
          .then(response => {
            const index = this.clients.indexOf(item)
            this.deletedItem = Object.assign({}, item)
            this.deletedID = this.deletedItem.id
            this.clients.splice(index, 1);
            this.response = response
          }).catch(e => {
          console.log(e)
        });
        }
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          axios.post('http://192.168.26.130:3000/client/')
          .then(response => {
            Object.assign(this.clients[this.editedIndex], this.editedItem)
            this.response = response.data
          }).catch(e => {
          console.log(e)
        });
        } else {
            this.clients.push(this.editedItem)
        }
        this.close()
      },

    },
  }
</script>

mdi客户主管
客户
mdi plusAdd新
{{formTitle}}
取消
拯救
mdi铅笔
mdi删除
重置
从“axios”导入axios
从“../../services/clients”导入客户端；
从“../../services/genders”导入性别；
导出默认值{
数据：（）=>({
对话：错，
标题：[
{
文本：“名字”，
对齐：“开始”，
可排序：false，
值：“firstName”，
},
{文本：'lastName'，值：'lastName'}，
{text:'Email'，value:'Email'}，
{文本：'Phone'，值：'Phone'}，
{文本：'Mobile Phone'，值：'mobilePhone'}，
{text:'Gender'，value:'Gender.name'}，
{text:'Actions'，value:'action'，sortable:false}，
],
客户：[]，
性别：[]，
错误：[]，
编辑索引：-1，
编辑：{
名字：''，
姓氏：“”，
电子邮件：“”，
电话：''，
手机：''，
性别：''，
},
默认项目：{
名字：''，
姓氏：“”，
电子邮件：“”，
电话：''，
手机：''，
性别：''，
},
}),
计算：{
formTitle（）{
返回此。editedIndex==-1？“新项目”：“编辑项目”
},
},
观察：{
对话框（val）{
val | | this.close（）
},
},
创建（）{
this.initialize（）
},
方法：{
初始化（）{
Client.list（）.then（响应=>{
this.clients=response.data
}).catch（e=>{
控制台日志（e）
});
Gender.list（）.then（响应=>{
this.genders=response.data
}).catch（e=>{
控制台日志（e）
});
},
编辑项目（项目）{
轴心http://192.168.26.130:3000/client/“+item.id）
。然后（响应=>{
this.editedIndex=this.clients.indexOf（项目）
this.editem=Object.assign（{}，item）
this.edited=this.editem.id
this.dialog=true
this.response=响应
}).catch（e=>{
控制台日志（e）
});
},
删除项目（项目）{
if（确认（“是否确实要删除？”）{
axios.delete（'http://192.168.26.130:3000/client/“+item.id）
。然后（响应=>{
常量索引=this.clients.indexOf（项）
this.deletedItem=Object.assign（{}，item）
this.deletedID=this.deletedItem.id
这个.客户.拼接（索引，1）；
this.response=响应
}).catch（e=>{
控制台日志（e）
});
}
},
结束（）{
this.dialog=false
设置超时（（）=>{
this.editem=Object.assign（{}，this.defaultItem）
this.editedIndex=-1
}, 300)
},
保存（）{
如果（this.editedIndex>-1）{
轴心柱http://192.168.26.130:3000/client/')
。然后（响应=>{
Object.assign（this.clients[this.editedIndex]，this.editedem）
this.response=response.data
}).catch（e=>{
控制台日志（e）
});
}否则{
this.clients.push（this.editem）
}
这个。关闭（）
},
},
}

打开要添加项目的模式时，仅当打开选择并修改流派时，此错误甚至在保存之前就已出现，如图所示：

当点击save时，它只保存在前面，当更新页面时，记录消失，有人能给我点提示吗

更新编辑。

经过一些更改后，我认为我更接近于解决方案，但我遇到了以下障碍：在保存客户端项时，性别存储为空

和保存在前端但在数据库中性别为空的项目

文件DataTable.vue：

<template>
    <v-data-table
      :headers="headers"
      :items="clients"
      sort-by="firstName"
      class="elevation-2"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-icon medium>mdi-account-supervisor</v-icon>
            <v-toolbar-title> Clients</v-toolbar-title>
          <v-divider
            class="mx-4"
            inset
            vertical
          ></v-divider>
          <v-spacer></v-spacer>
          <v-dialog v-model="dialog" max-width="600px">
            <template v-slot:activator="{ on }">
                <v-btn 
                color="blue" 
                dark class="mt-6 mb-4" 
                v-on="on"
                rounded
                ><v-icon medium>mdi-plus</v-icon>Add new</v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-container>
                  <v-form>
                    <v-row>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.firstName" label="First Name"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.lastName" label="Last Name"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.email" label="E-Mail"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.phone" label="Phone"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <v-text-field v-model="editedItem.mobilePhone" label="Mobile Phone"></v-text-field>
                      </v-col>
                      <v-col cols="12" sm="6" md="12">
                        <!-- select options-->
                        <v-select
                          label='Gender'
                          v-model='editedItem.gender'
                          :items='genders'
                          item-value='name'
                          item-text='name'
                        >
                        </v-select>
                      </v-col>
                    </v-row>
                  </v-form>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" rounded @click="close">Cancel</v-btn>
                <v-btn color="primary" rounded @click="save">Save</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <template v-slot:item.action="{ item }">
        <v-icon
          small
          color="green"
          class="mr-2"
          @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
          small
          color="red"
          @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>

<script>
import axios from 'axios'
import Client from '../../services/clients';
import Gender from '../../services/genders';

  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      clients: [],
      genders: [],
      errors: [],
      editedIndex: -1,
      editedItem: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        mobilePhone: '',
        gender: '',
      },
      defaultItem: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        mobilePhone: '',
        gender: '',
      },
    }),
    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },
    watch: {
      dialog (val) {
        val || this.close()
      },
    },
    created () {
      this.initialize()
    },
    methods: {
      initialize () {
        Client.list().then(response => {
          this.clients = response.data
        }).catch(e => {
          console.log(e)
        });
        Gender.list().then(response => {
          this.genders = response.data
        }).catch(e => {
          console.log(e)
        });

      },
      editItem (item) {
        axios.put('http://192.168.26.130:3000/client/' + item.id)
          .then(response => {
            this.editedIndex = this.clients.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.editedID = this.editedItem.id
            this.dialog = true
            this.response = response
        }).catch(error => {
          console.log(error.response)
        });
      },

      deleteItem (item) {
        if (confirm("Do you really want to delete?")) {
          axios.delete('http://192.168.26.130:3000/client/' + item.id)
            .then(response => {
              const index = this.clients.indexOf(item)
              this.deletedItem = Object.assign({}, item)
              this.deletedID = this.deletedItem.id
              this.clients.splice(index, 1);
              this.response = response
            }).catch(error => {
                console.log(error.response)
              });
        }
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.clients[this.editedIndex], this.editedItem)
        } else {
            this.clients.push(this.editedItem)
            axios.post('http://192.168.26.130:3000/client/', this.editedItem)
              .then(response => {
                console.log(response)
              }).catch(error => {
              console.log(error.response)
            });

        }
        this.close()
      },

    },
  }
</script>

mdi客户主管
客户
mdi plusAdd新
{{formTitle}}