My database file, db.json, has the following structure:
{
"users": [
{
"id": 0,
"isActive": true,
"balance": "$2,309.20",
"picture": "http://placehold.it/128x128",
"age": 26,
"accessLevel": "guest",
"firstName": "Robin",
"lastName": "Whitaker",
"company": "REMOTION",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c2dfd2d9de9ec7d8d9c4d1dbd5c2f0c2d5dddfc4d9dfde9ed3dfdd">[email protected]</a>",
"phone": "+7 (845) 419-3899",
"address": "442 Hanson Place, Tonopah, Washington, 5118",
"about": "Ut occaecat cillum esse eu Lorem sit dolore. Fugiat cillum occaecat ad consequat ex irure velit ullamco occaecat Lorem fugiat qui consectetur do. Proident sunt eu sint cupidatat quis. Fugiat ad sunt eu sint velit anim eiusmod commodo incididunt excepteur deserunt ex exercitation. Mollit sunt incididunt sint ut et.",
"registered": "21.03.2016"
},
{
"id": 1,
"isActive": true,
"balance": "$2,746.85",
"picture": "http://placehold.it/128x128",
"age": 22,
"accessLevel": "guest",
"firstName": "Richardson",
"lastName": "Adkins",
"company": "OCEANICA",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7103181219100315021e1f5f10151a181f02311e1214101f1812105f1c14">[email protected]</a>",
"phone": "+7 (902) 517-3328",
"address": "117 Beverley Road, Maxville, South Dakota, 6701",
"about": "Nulla nulla do cillum dolore commodo incididunt laborum labore laboris nisi cillum cillum do. Lorem exercitation nisi proident est adipisicing adipisicing eiusmod labore velit pariatur id enim. Aliquip fugiat adipisicing et dolor eu minim irure anim ea cupidatat. Pariatur magna duis ullamco anim culpa nisi nostrud.",
"registered": "12.04.2014"
}
]
}
In addition, I have a user form for adding new users:
https://i.sstatic.net/MbMHZ.png
When attempting to add a new user to db.json:
<template>
<div>
<h3>Add user</h3>
<hr>
<template>
<user-form-add v-model="user" /> // userForm on the PICTURE!
<button type="button" class="btn btn-success" @click="save">Save</button>
<button type="button" class="btn btn-danger" @click="cancel">Cancel</button>
</template>
</div>
</template>
<script>
import axios from '@/axios.js'
export default {
name: 'AddUserPage',
components: {
UserFormAdd: () => import('@/components/UserFormAdd.vue')
},
data:() => ({
user: {
},
restUrl: '/users'
}),
computed: {
id() {
return null
},
url() {
return `${this.restUrl}/${this.id}`
}
},
methods: {
redirectToList () {
this.$router.push('/users')
},
save() {
axios
.put(this.url, this.user)
.then(() => this.redirectToList())
.catch(error => `Error: ${error}`)
},
cancel() {
this.redirectToList()
}
}
}
</script>
However, upon saving, the console returns the error message:
PUT /users/null 404 1.492 ms - 2
By setting the id as:
id() {
return 0
}
The first object in my db.json is replaced with the new user:
PUT /users/0 200 1.397 ms - 143
I am puzzled by this issue and seek assistance. Thank you.