Here are some simple examples which show how to use treacherous with vue.
Head to the examples folder in the source to see how it all works.
This shows the most basic example where you have a single component which validates a single field, there is also a button to trigger validation, which covers the most basic use cases.
This shows how to use complex models which may have nested properties or arrays, as well as the ability to validate on props. We have also enabled reactive validation so as and when values change it will automatically update the state.
One other interesting thing in this example is that the age is configured to use a custom view strategy, so that will handle the validation differently to the other fields in this example, and all it takes is a single attribute to swap strategy (and a custom strategy registered, seen in app.js)
In some cases you will have multiple components on the page which have their own validation concerns, but want to display all the validation errors as a singular summary to the user.
Because the validation groups come from refs, they are not available initially available until the parent has been mounted. This is why we have the v-if here to stop the directive running until the validation groups have been setup.
v-if