Level 58
To prefill the form with the user data, you can pass the user data as a prop to the edit component and use it to set the initial values of the form fields. Here's an example:
- In your Laravel controller, fetch the user data and pass it to the edit view:
public function edit(User $user)
{
return Inertia::render('EditUser', [
'user' => $user
]);
}
- In your Vue component, define a prop to receive the user data:
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
form: {
name: this.user.name,
email: this.user.email,
password: ''
}
}
}
}
- Use the prop to set the initial values of the form fields:
<template>
<div>
<input type="text" v-model="form.name">
<input type="email" v-model="form.email">
<input type="password" v-model="form.password">
</div>
</template>
- Pass the user data prop to the edit component when rendering it:
<template>
<div>
<button @click="editUser(user)">Edit</button>
<EditUser :user="selectedUser" />
</div>
</template>
<script>
import EditUser from './EditUser.vue'
export default {
components: {
EditUser
},
data() {
return {
users: [],
selectedUser: null
}
},
methods: {
editUser(user) {
this.selectedUser = user
}
}
}
</script>
Now when you click the Edit button, the EditUser component will receive the user data as a prop and use it to prefill the form fields.