diff --git a/docs/.vuepress/components/ValidationRequired.vue b/docs/.vuepress/components/ValidationRequired.vue new file mode 100644 index 0000000..56e1bcc --- /dev/null +++ b/docs/.vuepress/components/ValidationRequired.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 0ff773b..d8d80e0 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -117,6 +117,7 @@ module.exports = { title: 'Digging Deeper', collapsable: false, children: [ + ['guide/validation', 'Validation'], ['guide/vuex', 'Vuex'], ['guide/ajax', 'AJAX'], ], diff --git a/docs/guide/validation.md b/docs/guide/validation.md new file mode 100644 index 0000000..9a9c319 --- /dev/null +++ b/docs/guide/validation.md @@ -0,0 +1,24 @@ +## Required + +If you need to ensure that a selection is made before a form is submitted, you can +use the `required` attribute in combination with the `search` scoped slot in order +to do so. + +However, the `search` input within the component does not actually store a value, so +simply adding the `required` attribute won't work. Instead, we'll bind the attribute +dynamically, so that it's only present if we don't have a selection. + + + +```html + + + +```