我有带有复选框的表单,我希望用户至少选择其中之一。一切正常,但重置表单后我无法隐藏验证消息。
这种情况在docs https://logaretm.github.io/vee-validate/guide/forms.html#programmatic-access-with-refs,但提供的解决方案似乎无效,因为提交表单验证后出现错误。
<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 https://codesandbox.io/s/vee-validate-3-reset-checkbox-validation-qr8uw请选择一些餐食类型并单击“保存”。单击“保存”按钮后,表单将被重置并显示验证消息,但它不应该出现。如何解决这个问题?
找到了一个解决方法,这将帮助您解决问题(原始的this.$refs.form.reset()
),一定是一个bug,应该报告给VeeValidate来解决。
我发现了制作方法async
,并手动重置变量使一切顺利。
methods: {
async addRecipe() {
console.log("add recipe");
console.log(this.mealType);
this.mealType = [];
this.$refs.obs.reset();
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)