-
-
Save sproogen/147d75db261505e8a558a7fd11a20551 to your computer and use it in GitHub Desktop.
| import Vue from 'vue'; | |
| const bus = new Vue(); | |
| export default bus; |
| <template> | |
| <div> | |
| <input v-validate data-rules="required" :class="{'has-error': errors.has("textInput")}" id="textInput" name="textInput" type="text"> | |
| <span class="error" v-show="errors.has("textInput")">{{ errors.first("textInput") }}</span> | |
| </div> | |
| </template> | |
| <script> | |
| import { find, propEq } from 'ramda' | |
| import bus from './bus' | |
| export default { | |
| mounted() { | |
| //Listen on the bus for the parent component running validation | |
| bus.$on('validate', this.onValidate) | |
| //Watch for the changes to the childs error bag and pass back to the parent | |
| this.$watch(() => this.errors.errors, (newValue, oldValue) => { | |
| const newErrors = newValue.filter(error => | |
| find(propEq('field', error.field))(oldValue) === undefined | |
| ) | |
| const oldErrors = oldValue.filter(error => | |
| find(propEq('field', error.field))(newValue) === undefined | |
| ) | |
| bus.$emit('errors-changed', newErrors, oldErrors) | |
| }) | |
| }, | |
| methods: { | |
| onValidate() { | |
| this.$validator.validateAll(); | |
| if (this.errors.any()) { | |
| bus.$emit('errors-changed', this.errors.errors) | |
| } | |
| }, | |
| }, | |
| beforeDestroy() { | |
| //When destroying the element remove the listeners on the bus. | |
| //Useful for dynaically adding and removing child components | |
| bus.$emit('errors-changed', [], this.errors.errors) | |
| bus.$off('validate', this.onValidate) | |
| }, | |
| } | |
| </script> |
| <template> | |
| <div> | |
| <child-component></child-component> | |
| <button :disabled="errors.any()" :click="submit()"></button> | |
| </div> | |
| </template> | |
| <script> | |
| import bus from './bus' | |
| import ChildComponent from './ChildComponent' | |
| export default { | |
| mounted() { | |
| //Emit that validation is required on the bus | |
| this.$on('veeValidate', () => { | |
| bus.$emit('validate'); | |
| }) | |
| //Listen on the bus for changers to the child components error bag and merge in/remove errors | |
| bus.$on('errors-changed', (newErrors, oldErrors) => { | |
| newErrors.forEach(error => { | |
| if (!this.errors.has(error.field)) { | |
| this.errors.add(error.field, error.msg) | |
| } | |
| }) | |
| if (oldErrors) { | |
| oldErrors.forEach(error => { | |
| this.errors.remove(error.field) | |
| }) | |
| } | |
| }) | |
| }, | |
| methods: { | |
| submit() { | |
| //On button pressed run validation | |
| this.$validator.validateAll() | |
| if (!this.errors.any()) { | |
| //Do Sumbit | |
| } | |
| } | |
| } | |
| components: { | |
| ChildComponent, | |
| }, | |
| }; | |
| </script> |
@garymcm thank you .
As @Banandrew wrote, you can use inject API. The link was updated so here is an updated link -> https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator
@garymcm thanks
@garymcm this worked perfectly, many thanks!
@garymcm thank you!
@garymcm Thx man, was struggling for hours with this
Thanks @garymcm. Your 7 lines of example code were much more helpful than the documentation at https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator
Thanks @garymcm. Your 7 lines of example code were much more helpful than the documentation at https://baianat.github.io/vee-validate/concepts/injections.html#injecting-parent-validator
You're DM Right!
Thanks @garymcm
@garymcm WOW... amazing
@garymcm Thanks !!
@garymcm That works perfectly. Thank you
@garymcm thank you :)
created () {
this.$validator = this.parentValidator
}
It works, Thanks.
@garymcm thank you, it worked perfectly
@garymcm That worked perfectly — thank you! :)