I am facing a challenge with my Laravel 8 registration form using Vue js. Before submitting the form, I need to verify if the referring user exists in the database. If the user is found, I want to dynamically display their full name in an input field upon @change event.
Below is the Vue component structure:
<template>
<div>
<h2>TESTING</h2>
<form @submit.prevent="submit" > ;
<input type="text" class="form-control" v-model="form.ucode" @change="getUser()">
<input type="text" class="form-control" v-model="form.uname">
</form>
</div>
</template>
<script>
export default {
data: function(){
return{
form:{
ucode: "",
uname: "",
},
}
},
methods:{
getUser(){
axios.get('api/checkUser?ucode=' + this.form.ucode).then(res=>{
this.form.uname = res.data.first_name
})
}
}
}
This is how my ResellerController and API route are set up:
Route::get('/checkUser', [ResellerController::class, 'show']);
public function show()
{
$ucode = request('ucode');
$user = DB::table('resellers')->where('username', $ucode)->select('id', 'first_name')->get();
return response()->json($user);
}
The controller seems to be working fine as it returns the correct JSON data:
[{"id":1,"first_name":"William Hardiev"}]
However, during testing, the 'uname' field remains undefined:
form:Object
ucode:"williambola_05"
uname:undefined
If anyone can provide some assistance with this issue, I would greatly appreciate it!