can't submit form select option Vuelidate - forms

Question

I'm using Vuelidate version 0.7.6, for form validation, i have a selected option to validate it with submit form, if a chose a validate option or a null option i have error i wrote the same code for input text it works, but for select no:
<div class="col-md-4">
<label for="exampleFormControlS1">Famille:</label>
<select
class="form-control form-control-sm mt-2"
id="exampleFormControlSelect1"
name="family"
v-model="familyId"
#change="onChange($event)"
:class="{
'is-invalid': $v.family.$error,
'is-valid': !$v.family.$invalid,
}"
><option value="null">- -- -</option>
<option
v-for="lineItem in familyListe"
:key="lineItem.id"
:value="lineItem.id"
>
{{ lineItem.name }}</option
>
</select>
<div class="invalid-feedback">
<span v-if="!$v.family.required">Famille requise</span>
</div>
</div>
validations: {
family: {
required,
},
}

Answer 1

I guess you should change v-model to "family" instead of "familyId" to validate your field correctly.
<select
class="form-control form-control-sm mt-2"
id="exampleFormControlSelect1"
name="family"
v-model="family"
#change="onChange($event)"
:class="{
'is-invalid': $v.family.$error,
'is-valid': !$v.family.$invalid,
}"
>...
onChange method according to Vuelidate Docs: Form submission
methods: {
onChange() {
console.log("onChange!");
if (this.$v.$invalid) {
this.submitStatus = "ERROR";
} else {
this.submitStatus = "OK";
}
}
}
Check the following CodeSandbox for details:
https://codesandbox.io/s/stackoverflow-69434609-vuelidate-t11qy?file=/package.json