Problem in POST and PUT request, with axios, vuetify datatable, vuejs - vue.js

Question

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 GET AND DELETE method is working perfectly, however I am very confused about the POST AND PUT method, I am using 2 models as a client and the relationship with the genre, follows part of the code:
<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>
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:
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?
Update Edit.
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.
of console.log and the item saved in the front end but in the database the gender is empty
The file 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>
Please would someone help me?

Answer 1

There are a couple of issues. First, you aren't passing any data to your PUT and POST requests. They should look something like:
editItem (item) {
// YOU NEED TO PASS AN OBJECT TO THE PUT REQUEST ▼▼HERE▼▼
axios.put('http://192.168.26.130:3000/client/' + item.id , item)
.then(response => {
// handle response...
})
.catch(err => { console.log(error) })
},
save () {
if (this.editedIndex > -1) {
// YOU NEED TO PASS AN OBJECT TO THE POST REQUEST ▼▼HERE▼▼
axios.post('http://192.168.26.130:3000/client/', this.editedItem)
.then(response => {
// handle response...
})
.catch(err => { console.log(error) })
} else { /* ... */ }
},
Second, under the hood, <v-select> uses a v-for to iterate over all of the options that are supposed to go into the dropdown menu. If this were a plain HTML <select> element, it would look something like this:
<select name="gender">
<option value="">Select a gender...</option>
<option
v-for="gender in genders"
:key="gender"
value="gender.value"
>
{{ gender.text }}
</option>
</select>
Vuetify expects the array of genders to be in one of two formats, either an array of strings, or an array of objects with text and value properties:
const genders = ['male', 'female', 'other']
// OR
const genders = [
{ value: 1, text: 'male' }, // `value` can be anything you want
{ value: 2, text: 'female' },
{ value: 3, text: 'other' },
]
Alternatively, if your genders array has a different data structure, you can tell Vuetify what properties to use for the value and text properties (this is what it looks like you did). So if your genders array looks like this:
const genders = [
{ name: 'male' },
{ name: 'female' },
{ name: 'other' },
]
Your <v-select> should look like this (in your case you used the SAME property for both text and value, which is perfectly fine to do):
<v-select
v-model="editedItem.gender"
:items="genders"
item-text="name"
return-object
/>
What I'm guessing, based on the image you attached, is that the genders array is NOT in one of these formats, and this is causing an error when Vuetify tries to turn it into a dropdown. Also, I think you intend for the value selected to be assigned to editedItem.gender and not editedItem.gender.name. Here's a codepen showing how to use objects for v-select items.
If the items array is in one of the two formats I showed before, you do NOT need to specify the item-text and item-value props. They will be detected automatically.
Hope this helps!