提交表单后,验证将重置

时间:2019-12-17 19:07:18

标签: validation vue.js vee-validate

我有带有复选框的表单,我希望用户至少选择其中一个。一切正常,但是重置表单后,我无法隐藏验证消息。 docs中已确切描述了这种情况,但是提供的解决方案似乎无效,因为在提交表单验证后会显示错误。

    <template>
      <v-app>
        <v-content>
          <playground></playground>
          <v-card class="mx-auto" outlined>
            <ValidationObserver ref="obs" v-slot="{ invalid, valid, validated, passes, reset }">
              <v-card-title class="pb-0">Meal types</v-card-title>
              <v-row justify="center">
                <v-col cols="11">
                  <v-form ref="form">
                    <ValidationProvider rules="required" v-slot="{ errors, failedRules }">
                      <v-container row pa-0>
                        <v-row justify="space-around">
                          <v-checkbox
                            v-model="mealType"
                            value="BREAKFAST"
                            label="Breakfast"
                            hide-details
                          ></v-checkbox>
                          <v-checkbox v-model="mealType" value="DINNER" label="Dinner" hide-details></v-checkbox>
                          <v-checkbox v-model="mealType" value="SUPPER" label="Supper" hide-details></v-checkbox>
                          <v-checkbox v-model="mealType" value="SNACK" label="Snack" hide-details></v-checkbox>
                        </v-row>
                      </v-container>
                      <v-row justify="center">
                        <v-alert
                          v-if="failedRules.required"
                          type="error"
                          dense
                          outlined
                          class="mt-4 mb-0"
                        >Select at least one meal type</v-alert>
                      </v-row>
                    </ValidationProvider>
                  </v-form>
                </v-col>
              </v-row>
              <v-card-actions>
                <v-row justify="center">
                  <v-btn text color="deep-purple accent-4" @click="passes(addRecipe)">Save</v-btn>
                  <v-btn @click="reset">Reset</v-btn>              
                </v-row>
              </v-card-actions>
            </ValidationObserver>
          </v-card>
        </v-content>
      </v-app>
    </template>

    <script>
    import Playground from "./components/Playground";

    export default {
      name: "App",
      components: {
        Playground
      },
      data() {
        return {
          recipeName: "",
          mealType: []
        };
      },
      methods: {
        addRecipe() {
          console.log("add recipe");
          // after save or reset alerts should disappear..
          this.$refs.form.reset();
          requestAnimationFrame(() => {
            this.$refs.obs.reset();
          });
        }
      }
    };
    </script>

具有复制用例的代码沙箱:https://codesandbox.io/s/vee-validate-3-reset-checkbox-validation-qr8uw 请选择一些膳食类型,然后单击“保存”。单击“保存”按钮后,将重置该表单,并显示验证消息,但不是这样。该如何解决?

1 个答案:

答案 0 :(得分:2)

找到了一种解决方法,它可以帮助您解决问题(带有this.$refs.form.reset()的原始问题),必须是一个错误,应报告给VeeValidate解决。

我发现制作了方法async,并手动重置了变量,使其全部可用。

methods: {
  async addRecipe() {
    console.log("add recipe");
    console.log(this.mealType);

    this.mealType = [];
    this.$refs.obs.reset();
  }
}