title: Problem in POST and PUT request, with axios, vuetify datatable, vuejs
body: <p>I'm trying to adapt a sample datatable from the vuetify website itself according to my needs by implementing axios to consume my api. The <strong>GET AND DELETE</strong> method is working perfectly, however I am very confused about the <strong>POST AND PUT</strong> method, I am using 2 models as a client and the relationship with the genre, follows part of the code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-data-table
        :headers="headers"
        :items="clients"
        sort-by="firstName"
        class="elevation-2"
      &gt;
        &lt;template v-slot:top&gt;
          &lt;v-toolbar flat color="white"&gt;
            &lt;v-icon medium&gt;mdi-account-supervisor&lt;/v-icon&gt;
              &lt;v-toolbar-title&gt; Clients&lt;/v-toolbar-title&gt;
            &lt;v-divider
              class="mx-4"
              inset
              vertical
            &gt;&lt;/v-divider&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-dialog v-model="dialog" max-width="600px"&gt;
              &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-btn 
                  color="blue" 
                  dark class="mt-6 mb-4" 
                  v-on="on"
                  rounded
                  &gt;&lt;v-icon medium&gt;mdi-plus&lt;/v-icon&gt;Add new&lt;/v-btn&gt;
              &lt;/template&gt;
              &lt;v-card&gt;
                &lt;v-card-title&gt;
                  &lt;span class="headline"&gt;{{ formTitle }}&lt;/span&gt;
                &lt;/v-card-title&gt;
  
                &lt;v-card-text&gt;
                  &lt;v-container&gt;
                    &lt;v-form&gt;
                      &lt;v-row&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.firstName" label="First Name"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.lastName" label="Last Name"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.email" label="E-Mail"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.phone" label="Phone"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.mobilePhone" label="Mobile Phone"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;!-- select options--&gt;
                          &lt;v-select
                            label='Gender'
                            v-model='editedItem.gender.name'
                            :items='genders'
                            item-value='name'
                            item-text='name'
                          &gt;
                          &lt;/v-select&gt;
                        &lt;/v-col&gt;
                      &lt;/v-row&gt;
                    &lt;/v-form&gt;
                  &lt;/v-container&gt;
                &lt;/v-card-text&gt;
  
                &lt;v-card-actions&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn color="error" rounded @click="close"&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn color="primary" rounded @click="save"&gt;Save&lt;/v-btn&gt;
                &lt;/v-card-actions&gt;
              &lt;/v-card&gt;
            &lt;/v-dialog&gt;
          &lt;/v-toolbar&gt;
        &lt;/template&gt;
        &lt;template v-slot:item.action="{ item }"&gt;
          &lt;v-icon
            small
            color="green"
            class="mr-2"
            @click="editItem(item)"
          &gt;
            mdi-pencil
          &lt;/v-icon&gt;
          &lt;v-icon
            small
            color="red"
            @click="deleteItem(item)"
          &gt;
            mdi-delete
          &lt;/v-icon&gt;
  
        &lt;/template&gt;
        &lt;template v-slot:no-data&gt;
          &lt;v-btn color="primary" @click="initialize"&gt;Reset&lt;/v-btn&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  import Client from '../../services/clients';
  import Gender from '../../services/genders';
  
    export default {
      data: () =&gt; ({
        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 =&gt; {
            this.clients = response.data
          }).catch(e =&gt; {
            console.log(e)
          });
          Gender.list().then(response =&gt; {
            this.genders = response.data
          }).catch(e =&gt; {
            console.log(e)
          });
  
        },
        editItem (item) {
          axios.put('http://192.168.26.130:3000/client/' + item.id)
            .then(response =&gt; {
              this.editedIndex = this.clients.indexOf(item)
              this.editedItem = Object.assign({}, item)
              this.editedID = this.editedItem.id
              this.dialog = true
              this.response = response
          }).catch(e =&gt; {
            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 =&gt; {
              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 =&gt; {
            console.log(e)
          });
          }
        },
  
        close () {
          this.dialog = false
          setTimeout(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          }, 300)
        },
  
        save () {
          if (this.editedIndex &gt; -1) {
            axios.post('http://192.168.26.130:3000/client/')
            .then(response =&gt; {
              Object.assign(this.clients[this.editedIndex], this.editedItem)
              this.response = response.data
            }).catch(e =&gt; {
            console.log(e)
          });
          } else {
              this.clients.push(this.editedItem)
          }
          this.close()
        },
  
      },
    }
  &lt;/script&gt;
  
  </code></pre>
  
  <p>When opening the modal to add item, only when opening the select and modifying the genre this error already appears before even saving, as shown in the image:</p>
  
  <p>When clicking on save it is saved only on the front, and when updating the page the record disappears, could someone give me a light?</p>
  
  <p><strong>Update Edit.</strong></p>
  
  <p>After some changes, I think I am closer to the solution but I came to the following obstacle, When saving the client item, the gender is stored empty. </p>
  
  <p><img src="https://i.stack.imgur.com/VeAUK.jpg" alt="Image"> of console.log and the item saved in the front end but in the database the gender is empty</p>
  
  <p>The file DataTable.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-data-table
        :headers="headers"
        :items="clients"
        sort-by="firstName"
        class="elevation-2"
      &gt;
        &lt;template v-slot:top&gt;
          &lt;v-toolbar flat color="white"&gt;
            &lt;v-icon medium&gt;mdi-account-supervisor&lt;/v-icon&gt;
              &lt;v-toolbar-title&gt; Clients&lt;/v-toolbar-title&gt;
            &lt;v-divider
              class="mx-4"
              inset
              vertical
            &gt;&lt;/v-divider&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-dialog v-model="dialog" max-width="600px"&gt;
              &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-btn 
                  color="blue" 
                  dark class="mt-6 mb-4" 
                  v-on="on"
                  rounded
                  &gt;&lt;v-icon medium&gt;mdi-plus&lt;/v-icon&gt;Add new&lt;/v-btn&gt;
              &lt;/template&gt;
              &lt;v-card&gt;
                &lt;v-card-title&gt;
                  &lt;span class="headline"&gt;{{ formTitle }}&lt;/span&gt;
                &lt;/v-card-title&gt;
  
                &lt;v-card-text&gt;
                  &lt;v-container&gt;
                    &lt;v-form&gt;
                      &lt;v-row&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.firstName" label="First Name"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.lastName" label="Last Name"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.email" label="E-Mail"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.phone" label="Phone"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;v-text-field v-model="editedItem.mobilePhone" label="Mobile Phone"&gt;&lt;/v-text-field&gt;
                        &lt;/v-col&gt;
                        &lt;v-col cols="12" sm="6" md="12"&gt;
                          &lt;!-- select options--&gt;
                          &lt;v-select
                            label='Gender'
                            v-model='editedItem.gender'
                            :items='genders'
                            item-value='name'
                            item-text='name'
                          &gt;
                          &lt;/v-select&gt;
                        &lt;/v-col&gt;
                      &lt;/v-row&gt;
                    &lt;/v-form&gt;
                  &lt;/v-container&gt;
                &lt;/v-card-text&gt;
  
                &lt;v-card-actions&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn color="error" rounded @click="close"&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn color="primary" rounded @click="save"&gt;Save&lt;/v-btn&gt;
                &lt;/v-card-actions&gt;
              &lt;/v-card&gt;
            &lt;/v-dialog&gt;
          &lt;/v-toolbar&gt;
        &lt;/template&gt;
        &lt;template v-slot:item.action="{ item }"&gt;
          &lt;v-icon
            small
            color="green"
            class="mr-2"
            @click="editItem(item)"
          &gt;
            mdi-pencil
          &lt;/v-icon&gt;
          &lt;v-icon
            small
            color="red"
            @click="deleteItem(item)"
          &gt;
            mdi-delete
          &lt;/v-icon&gt;
  
        &lt;/template&gt;
        &lt;template v-slot:no-data&gt;
          &lt;v-btn color="primary" @click="initialize"&gt;Reset&lt;/v-btn&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  import Client from '../../services/clients';
  import Gender from '../../services/genders';
  
    export default {
      data: () =&gt; ({
        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 =&gt; {
            this.clients = response.data
          }).catch(e =&gt; {
            console.log(e)
          });
          Gender.list().then(response =&gt; {
            this.genders = response.data
          }).catch(e =&gt; {
            console.log(e)
          });
  
        },
        editItem (item) {
          axios.put('http://192.168.26.130:3000/client/' + item.id)
            .then(response =&gt; {
              this.editedIndex = this.clients.indexOf(item)
              this.editedItem = Object.assign({}, item)
              this.editedID = this.editedItem.id
              this.dialog = true
              this.response = response
          }).catch(error =&gt; {
            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 =&gt; {
                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 =&gt; {
                  console.log(error.response)
                });
          }
        },
  
        close () {
          this.dialog = false
          setTimeout(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          }, 300)
        },
  
        save () {
          if (this.editedIndex &gt; -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 =&gt; {
                  console.log(response)
                }).catch(error =&gt; {
                console.log(error.response)
              });
  
          }
          this.close()
        },
  
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Please would someone help me?</p>