Level 104
There are no value or v-model attributes on any of your form inputs.
Mar 19, 2024
7
Level 1
laravel vue js edit modal problem
when i click on edit button then user data not filling in edit user form....it's showing blank here is the my code:
<div class="modal fade" id="userFormModal" tabindex="-1" role="dialog" aria-labelledby="userFormModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title m-0" id="userFormModalTitle">
<span v-if="editing">Edit User</span>
<span v-else>Add New User</span>
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div><!--end modal-header-->
<Form @submit="createUser" :validation-schema="schema" v-slot="{ errors }" :initial-values="formValues">
<div class="modal-body">
<div class="mb-2">
<label for="name" class="mb-2">Username</label>
<Field name="name" class="form-control" :class="{'is-invalid': errors.name}" type="text" id="name" placeholder="Enter Username" />
<span class="invalid-feedback">{{ errors.name }}</span>
</div>
<div class="mb-2">
<label for="email" class="mb-2">Email</label>
<Field name="email" class="form-control" :class="{'is-invalid': errors.email}" type="text" id="email" placeholder="Enter email" />
<span class="invalid-feedback">{{ errors.email }}</span>
</div>
<div class="mb-2">
<label for="password" class="mb-2">Password</label>
<Field name="password" class="form-control" :class="{'is-invalid': errors.password}" type="password" id="password" placeholder="Enter password" />
<span class="invalid-feedback">{{ errors.password }}</span>
</div>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-de-primary btn-sm">Save</button>
</div><!--end modal-footer-->
</Form>
</div><!--end modal-content-->
</div><!--end modal-dialog-->
</div><!--end modal-->
Level 1
kindly please check again
const editUser = (user) => { editing.value = true; form.value.resetForm(); $('#userFormModal').modal('show'); formValues.value = { id: user.id, name: user.name, email: user.email, }; };
<div class="mb-2">
<label for="name" class="mb-2">Username</label>
<Field name="name" class="form-control" :class="{'is-invalid': errors.name}" type="text" id="name" placeholder="Enter Username" />
<span class="invalid-feedback">{{ errors.name }}</span>
</div>
<div class="mb-2">
<label for="email" class="mb-2">Email</label>
<Field name="email" class="form-control" :class="{'is-invalid': errors.email}" type="text" id="email" placeholder="Enter email" />
<span class="invalid-feedback">{{ errors.email }}</span>
</div>
<div class="mb-2">
<label for="password" class="mb-2">Password</label>
<Field name="password" class="form-control" :class="{'is-invalid': errors.password}" type="password" id="password" placeholder="Enter password" />
<span class="invalid-feedback">{{ errors.password }}</span>
</div>
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-de-primary btn-sm">Save</button>
</div><!--end modal-footer-->
</Form>
Level 29
Like @tykus already said you have no value/v-model set on your input fields.
Here is an example for v-model on the email field, add this to the rest of your fields.
<Field v-model="formValues.email" name="email" class="form-control" :class="{'is-invalid': errors.email}" type="text" id="email" placeholder="Enter email" />
Level 1
done: const formValues = ref(); to const formValues = ref({});
Level 29
@aashulv81 Does it work now? Can you share your complete script related to this section?
Are you using Vue SPA or Vue with Inertia ?
You should define the form values in your ref. For example for email.
const formValues = ref({
email: user.email;
});
If the form can also be used to add new users without an existing user object you can use this
const formValues = ref({
email: user ? user.email : "";
});
Level 1
Level 29
Please or to participate in this conversation.