this is my unique form code
<form @submit.prevent="updatePassword">
<div class="form-group">
<label>Old Password</label>
<input v-model="form.old_password" type="password" name="old_password"
class="form-control" :class="{ 'is-invalid':
form.errors.has('old_password') }">
<has-error :form="form" field="old_password"></has-error>
</div>
<div class="form-group">
<label>New Password</label>
<input v-model="form.password" type="password" name="password"
class="form-control" :class="{ 'is-invalid':
form.errors.has('password') }">
<has-error :form="form" field="password"></has-error>
</div>
<div class="form-group">
<label>Confirm New Password</label>
<input v-model="form.password_confirmation" type="password"
name="password_confirmation"
class="form-control" :class="{ 'is-invalid':
form.errors.has('password_confirmation') }">
<has-error :form="form" field="password_confirmation"></has-error>
</div>
<button :disabled="form.busy" type="submit" class="btn btn-primary">Update Password</button>
</form>
this is the script I used for password update
<script>
export default {
name: "Password",
data(){
return{
form: new Form({
old_password: '',
password: '',
password_confirmation: ''
}),
}
},
methods:{
updatePassword(){
axios
.post(`/data/password/update/${this.$parent.userId}`, this.form)
.then((response) => {
if(response.data === 'success'){
Swal.fire(
'Update',
'Password Updated Successfully',
'success'
);
}
})
})
},
},
mounted() {
}
}
</script>
this is how I import and use VForm in my Vue application
import {
Form,
HasError,
AlertError,
AlertErrors,
AlertSuccess
} from 'vform';
window.Form = Form;
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
Vue.component(AlertErrors.name, AlertErrors);
Vue.component(AlertSuccess.name, AlertSuccess);
here is how I validate the request in Laravel backend
public function passwordUpdate(Request $request, $id)
{
$this->validate($request, [
'old_password' => 'required',
'password' => 'required|string|min:8|confirmed',
]);
}
after submitting an empty form, I am encountering a rendering error
Error in render: "TypeError: _vm.form.errors.has is not a function"
I need assistance with resolving this issue. What could be the potential cause of the error?