I am looking to populate the form fields with current user information using Vuejs, Laravel, and Axios. Within the UserController.vue file, I have this code to retrieve the authenticated user's information from the API :
public function profile()
{
//
return auth('api')->user();
}
In the routes within the API.php file, I have defined the following endpoint :
Route::get('profile', 'API\UserController@profile');
On the profil.vue page, I have the following setup :
<script>
import Form from 'vform';
export default {
data(){
return {
form: new Form({
id : '',
name : '',
email : '',
password : '',
type : '',
bio : '',
photo : ''
})
}
},
mounted() {
console.log('Component mounted.')
},
created() {
// Displaying the currently logged-in user's information in the form
axios.get("./api/profile")
.then(({ data }) => (this.form.fill(data)));
}
}
</script>
I would like to show the current user's information in the form fields, for example :
<div class="form-group row">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-12">
<input v-model="form.name" type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
I am using Laravel v7.6.2 and Vue.js 2
Thank you.