无法提交表单选择选项Vuelidate

Question

我正在使用 Vuelidate 0.7.6 版，对于表单验证，我有一个选择的选项来验证它与提交表单，如果选择了验证选项或空选项我有错误我为输入文本编写了相同的代码它有效，但选择否：

         <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

我想您应该将 v-model 更改为“family”而不是“familyId”以正确验证您的字段。

 <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,
        }"
 >...

根据Vuelidate Docs的onChange方法：Form submission

 methods: {
    onChange() {
        console.log("onChange!");
        if (this.$v.$invalid) {
          this.submitStatus = "ERROR";
        } else {
          this.submitStatus = "OK";
        }
      }
    }

查看以下 CodeSandbox 了解详情：

https://codesandbox.io/s/stackoverflow-69434609-vuelidate-t11qy?file=/package.json