我正在为一个Vue前端应用程序工作,该应用程序要求所有表单数据在提交到后端之前都在本地保留,以防网络连接问题导致服务中断。我正在使用Vuex来维护整个应用程序中的所有表单数据,以便可以将其持久保存并根据需要从本地存储还原。
第二个要求是表单验证,我打算为此使用Vuelidate库。该文档建议使用不带v-model
的Vuelidate,所需的只是事件函数中的this.$v.touch()
。这是我尝试过的方法,但似乎没有用。
请参阅以下示例:
<template>
<form>
<input name="full-name" v-model="fullName" placeholder="Full Name" />
</form>
</template>
<script>
export default {
name: "AForm"
computed: {
fullName: {
get() { return this.$store.state.fullName }
set(name) {
this.$v.touch();
this.$store.dispatch("updateFullName", name);
},
}
},
validations: {
fullName: minLength(4);
}
}
</script>
当我检查$v.fullName
时,该值等于true
。当我查看整个$v
对象时,我看到了$anyDirty: false
。Codesandbox
最佳答案
验证配置格式错误
验证配置应为:
export default {
/**
* Validation Config Format:
*
* validations: {
* PROP_NAME: {
* RULE_NAME: RULE
* }
* }
*/
validations: {
//fullName: minLength(4), // DON'T DO THIS
fullName: {
minLength: minLength(4)
}
},
}
$touch
看起来您使用了this.$v.touch()
,但是应该是this.$v.$touch()
。但是,由于计算出的 Prop 仅设置了一个 Prop ,因此在通过Vuex Action 更改 Prop 后,您只需在该 Prop 上调用$touch()
(即$v.PROP_NAME.$touch()
)。export default {
computed: {
fullName: {
get() {
return this.$store.state.fullName;
},
set(name) {
//this.$v.touch() // DON'T DO THIS
this.$store.dispatch('updateFullName', name)
this.$v.fullName.$touch()
}
}
}
}