如何解决Vee Validate 4 验证与 Vuex 3 计算属性
我正在尝试按照官方 Vee-Validate 指南 found here 构建多步骤表单向导。虽然这个示例很有帮助,但我想将 Vuex 合并到其中,并且我使用自定义组件而不是 Vee-Validate 默认的 <Form/>
和 <ErrorMessage/>
组件。自定义组件在内部不使用 Vee-Validate 默认组件。
然而,这样做给我带来了一些问题。我目前的问题是我不知道如何让我的 Vuex 状态reactively 进入 Vee-Validate。
我的主要组件中的文本输入是这样使用的:
<text-input
label="Name"
name="name"
v-model="name"
/>
...
computed: {
...mapGetters({
businessFields: 'business/businessFields',}),name: {
get () {
return this.businessFields.name;
},set (value) {
this.$store.commit('business/setName',value)
}
},},
这都是根据two-way computed property guide that Vuex gives here。
现在我正在尝试将这些字段合并到之前链接的 Vee-Validate 多表单向导中。我基本上已经更改为在重置和从 Vuex 来回而不是本地值时获取值。像这样:
// FormWizard.vue (from the Vee-Validate example adapted to use Vuex)
<template>
<form @submit="onSubmit">
<slot />
<div>
<button v-if="hasPrevIoUs" type="button" @click="goToPrev">
PrevIoUs
</button>
<button type="submit">{{ isLastStep ? "Submit" : "Next" }}</button>
</div>
</form>
</template>
<script>
import { useForm } from "vee-validate";
import { useStore } from 'vuex';
import { ref,computed,provide } from "vue";
export default {
name: "FormWizard",emits: ["next","submit"],props: {
validationSchema: {
type: null,required: true,formDataGetter: {
type: String,}
},setup(props,{ emit }) {
const store = useStore();
const currentStepIdx = ref(0);
// Injects the starting step,child <form-steps> will use this to generate their ids
const stepCounter = ref(0);
provide("STEP_COUNTER",stepCounter);
// Inject the live ref of the current index to child components
// will be used to toggle each form-step visibility
provide("CURRENT_STEP_INDEX",currentStepIdx);
// if this is the last step
const isLastStep = computed(() => {
return currentStepIdx.value === stepCounter.value - 1;
});
// If the `prevIoUs` button should appear
const hasPrevIoUs = computed(() => {
return currentStepIdx.value > 0;
});
const { resetForm,handleSubmit } = useForm({
validationSchema: props.validationSchema,});
// We are using the "submit" handler to progress to next steps
// and to submit the form if its the last step
// parent can opt to listen to either events if interested
const onSubmit = handleSubmit(() => {
// Sets initial values for the values already filled
// effectively fills the inputs when clicking on "prevIoUs"
resetForm({
values: {
...store.getters[props.formDataGetter]
},});
if (!isLastStep.value) {
currentStepIdx.value++;
emit("next",store.getters[props.formDataGetter]);
return;
}
emit("submit");
});
function goToPrev() {
if (currentStepIdx.value === 0) {
return;
}
currentStepIdx.value--;
}
return {
onSubmit,hasPrevIoUs,isLastStep,goToPrev,};
},};
</script>
FormStep.vue 步骤完全相同。当我像这样使用 FormWizard 时:
<form-wizard :validationSchema="validationSchema" @submit="onSubmit" formDataGetter="setup/setupFields">
<form-step>
<business-form></business-form>
</form-step>
</form-wizard>
在我的主要组件中有一个 setup(),它包含 FormWizard,如下所示:
setup() {
const store = useStore();
// You don't have to validate each step
// vee-validate will only validate the fields rendered from the schema
// fields not rendered errors will be ignored,so it all just works!
const validationSchema = yup.object().shape({
name: yup.string().required(),});
/**
* Only Called when the last step is submitted
*/
const onSubmit = (values) => {
console.log(values);
alert(store.getters['business/businessFields'].name);
};
return {
validationSchema,onSubmit,
现在的情况是,当我进入下一页时,我收到一个验证错误,要求输入名称。这是因为没有使用 Vee-Validate 的 useField()
函数来容纳我的字段。 useField()
返回一个计算属性,您必须将其作为 v-model 链接到您的输入。这里出现的问题是,当我使用 useField()
时我无法更改 Vuex 字段,并且我无法使用 Vuex 的计算属性更改 useField,因为这不是 Vee-Validate 中的选项。
现在我的问题是:如何以一种方式实现 Vee-validate 3 和 Vuex 4,以便仅使用一个计算属性更新我的 Vuex 存储和我的 Vee-Validate useForm()
字段?
或者对此有不同的方法吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。