[Vuejs]-How to make a validation and show message if default value is selected in dropdown in vue

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.

Leave a comment