vue-step-wizard
vue-step-wizard copied to clipboard
hasError doesn't work with bootstrap-vue
Hi,
Thanks for the package, it's the best stepper I've found so far, with the least bugs.
I'm integrating this with bootstrap-vue, it's form elements have a state prop that requires 3 values, true/false and null. As it can show errors and success.
If I just use the value of :state="!hasError('field')"
it will mark the input as valid the moment the component is mounted:
the bootstrap-vue b-form-input component expects "state" to return 3 values via return $v.field.$dirty ? !$v.field.$error : null;
true: isValid
false: !isValid
null: not yet validated
I've solved this by adding my own function
inputState(fieldName) {
if ((fieldName in this.$v.formData)) {
return this.$v.formData[fieldName].$dirty ? !this.$v.formData[fieldName].$error : null;
}
<b-form-input
id="input-1"
v-model.trim="formData.email"
type="email"
placeholder="Enter email"
required
:state="inputState('email')"
></b-form-input>
Might be a handy addition to ValidationHelper to provide support for bootstrap-vue 👍
Thanks, Gary. I will add this method to the ValidationHelper class in the next release.