0👍
This is a simple example of what you are asking for:
// v-model property
selectedVModel: null
// html
<select id="testselect" v-model="selectedVModel" required>
<option :value="null">Default</option>
<option value="bar">Option 1</option>
<option value="foo">Option 2</option>
<option value="baz">Option 3</option>
</select>
<div v-if="!selectedVModel">Error! Choose something!</div>
You can handle the error inside of your child component. In this example, if the v-model
as selectedVModel
is empty, the <div>
with v-if="!selectedVModel"
will be shown. As selectedVModel
is null
it will automatically select <option :value="null">Default</option>
. If you chosse one of the options selectedVModel
get´s a value so v-if="!selectedVModel"
results into false
, no error then. If you select Default
again, the value turns to null
again which results into true
at v-if="!selectedVModel"
, so the error will be visible again.
Combine this simple example with your code and let me know if it helped you.
- [Vuejs]-Vue 2 app can't lazy load routes import componentes in vue-router
- [Vuejs]-Getting error: "[Vuetify] v-ripple can only be used on block-level elements" when deploying to Heroku
Source:stackexchange.com