I am using vform in vue.js to get data from a row for editing but this is the error i get. Cannot read property 'fill' of undefined

Question

this is the variable that holds the form data

 userForm: new Form({
                    last_name: '',
                    first_name: '',
                    other_name: '',
                    email: '',
                    dob: '',
                    gender: '',
                    phone_number: '',
                }),

on click of the edit button, i use the row id to fetch the data from backend and am using vform method fill to fill the userForm variable with the response data

'click .edit': function (e, value, row){

                            axios
                                .get('/data/admin/'+row.id)
                                .then(response => {
                                    this.loading = false;
                                    //let data = response;
                                    this.userForm.fill(response.data);
                                    $('#adminEditModal').modal('show');
                                }).catch(error => {

                                this.loading = false;
                                this.error = error.response.data.message || error.message;
                            });

                        },

this is my form

 <form @submit.prevent="UpdateUser" ref="userForm">
                <div class="modal-body">
                    <div class="login-logo">
                        <img src="" width="100" height="auto" alt="user">
                    </div>
                    <div class="form-group">
                    <label>Last Name</label>
                    <input v-model="userForm.last_name" type="text" name="last_name"
                        class="form-control" :class="{ 'is-invalid': userForm.errors.has('last_name') }">
                    <has-error :form="userForm" field="last_name"></has-error>
                    </div>
                    <div class="form-group">
                    <label>Firat Name</label>
                    <input v-model="userForm.first_name" type="text" name="first_name"
                        class="form-control" :class="{ 'is-invalid': userForm.errors.has('first_name') }">
                    <has-error :form="userForm" field="first_name"></has-error>
                    </div>
                    <div class="form-group">
                    <label>Other Name</label>
                    <input v-model="userForm.other_name" type="text" name="other_name"
                        class="form-control" :class="{ 'is-invalid': userForm.errors.has('other_name') }">
                    <has-error :form="userForm" field="other_name"></has-error>
                    </div>
                    <div class="form-group">
                    <label>Email</label>
                    <input v-model="userForm.email" type="email" name="email"
                        class="form-control" :class="{ 'is-invalid': userForm.errors.has('email') }">
                    <has-error :form="userForm" field="email"></has-error>
                    </div>


                    <div class="form-group">
                        <label>Date Of Birth</label>
                        <input v-model="userForm.dob" type="date" name="dob"
                               class="form-control" :class="{ 'is-invalid': userForm.errors.has('dob') }">
                        <has-error :form="userForm" field="dob"></has-error>
                    </div>
                    <div class="form-group">
                        <label>Gender</label>
                        <select v-model="userForm.gender" type="text" name="gender"
                                       class="form-control" :class="{ 'is-invalid': userForm.errors.has('gender') }" >
                            <option>Male</option>
                            <option>Female</option>

                        </select>
                        <has-error :form="userForm" field="gender"></has-error>
                    </div>
                    <div class="form-group">
                        <label>Phone Number</label>
                        <input v-model="userForm.phone_number" type="text" name="phone_number"
                               class="form-control" :class="{ 'is-invalid': userForm.errors.has('phone_number') }">
                        <has-error :form="userForm" field="phone_number"></has-error>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update <i class="fas fa-upload"></i></button>
                </div>
                </form>

Is `userForm` defined in your `data()` in your component? and where is `'click .edit'` applied to? — Troy Morehouse, Mar 02 '20 at 20:45
the userForm is define and the "click .edit' is an event handler in the vue-bootstrap datatables component that am using, what I have realized is that the vform methods don't work in the datatable onClick function but they work anywhere else that i use — Benjiro, Mar 03 '20 at 21:26

I am using vform in vue.js to get data from a row for editing but this is the error i get. Cannot read property 'fill' of undefined

0 Answers0