I create check-in system (Laravel + Vuetify), so i would like to ask: how to get userID from an object (API) en put them into input?
<template>
<v-text-field
v-model="debugItem.extra1_int"
:counter="250"
label="extra1_int"
hint="userID"
type="number"
clearable>
</v-text-field>
</template>
<script>
export default {
data() {
return {
debugItem: {}, /* store new debugItem */
user: '',
}
},
mounted() {
this.getUser();
this.debugItem.extra1_int = ***how to put here userID?***;
},
methods: {
getUser() {
axios.get('/user')
.then(response => (this.user = response.data))
.catch(error => console.log(error));
},
addDebugItem() { /* store new debugItem */
this.axios
.post('/api/debugs', this.debugItem)
.then(response => (
this.$router.push({name: 'indexDebugs'})
))
.catch(err => console.log(err))
.finally(() => this.loading = false)
}
}
}
</script>
Method getUser() http://127.0.0.1:8000/user return json-object of logged user:
{
"id": 119,
"name": "Johan",
"email": "Johan@mail.com",
"email_verified_at": null,
"is_active": 1,
"created_at": "2022-05-09T14:24:48.000000Z",
"updated_at": "2022-05-09T14:24:48.000000Z"
}
Thanks.
<template>
<v-text-field
v-model="debugItem.userId"
:counter="250"
label="extra1_int"
hint="userID"
type="number"
clearable>
</v-text-field>
</template>
<script>
export default {
data() {
return {
debugItem: {userId: null}, /* store new debugItem */
user: '',
}
},
mounted() {
this.getUser();
this.debugItem.userId = this.user.id
},
methods: {
getUser() {
axios.get('/user')
.then(response => (this.user = response.data))
.catch(error => console.log(error));
},
addDebugItem() { /* store new debugItem */
this.axios
.post('/api/debugs', this.debugItem)
.then(response => (
this.$router.push({name: 'indexDebugs'})
))
.catch(err => console.log(err))
.finally(() => this.loading = false)
}
}
}
</script>
My suggestion, Instead of assigning value to this.debugItem.extra1_int in mounted() lifecycle hook. You can assign it in getUser() on success of axios call.
data() {
return {
debugItem: {},
user: '',
}
},
mounted() {
this.getUser();
this.debugItem.extra1_int = ***how to put here userID?***; ❌
},
methods: {
getUser() {
axios.get('/user')
.then(response => {
this.user = response.data;
this.debugItem['extra1_int'] = this.user.id; ✅
})
.catch(error => console.log(error));
}
}