Vee使用Netlify表单验证x3版本

Question

我有一个简单的工作表单，用Netlify表单进行提交。Netlify表单非常直接，您只需要添加

name="contact" data-netlify="true" method="POST"和Netlify完成的所有后端工作

它看起来像这样：

<template>
<form ref="contact" name="contact" action="/success" 
data-netlify="true" method="POST" @submit.prevent="submit()">
<input type="text"  />
<button type="submit"> Send </button>
</form>
</template>
<script>
export default {
	methods: {
		submit() {
			this.$refs.contact.submit()
		},
	},
}
</script>

上面的代码正在按预期工作。现在，我尝试在我的表单中添加vee验证插件，您需要添加两个组件ValidationProvider和ValidationObserver。这就是我出错的地方。我的代码现在看起来像这样：

<template>
<ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
	<ValidationProvider rules="required" tag="div">
<input type="text"  />
</ValidationProvider>
<button type="submit"> Send </button>
</ValidationObserver>
</template>
<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
methods: {
async submit() {
const isValid = await this.$refs.contact.validate()
if (!isValid) {
return
}
this.$refs.contact.submit()
},
},
}
</script>

请注意，我使用tag="form"将组件呈现为表单，因为如果我只是包装表单，Netlify将无法识别该表单。在我的submit()中，我首先运行Validation，如果是肯定的，那么我会像以前一样提交表单，但我遇到了这个错误this.$refs.contact.submit is not a function。有趣的是，如果我在submit((函数中运行document.querySelector('.form').submit()，它就会起作用。

我觉得我的投稿不好，或者我可能做错了。

Answer 1

我对Netlify一无所知，但vee-validate需要在输入上设置v-model，或者手动管理验证。我的理解是，它使用v-model属性来确定在ValidationProvider中跟踪什么。这就是它应用规则(required(的项目，所以我认为你需要这个：

<template>
<ValidationObserver ref="contact" tag="form" name="contact" action="/success" data-netlify="true" method="POST" @submit.prevent="submit()">
<ValidationProvider rules="required" tag="div">
<input type="text" v-model="myTextInput" />
</ValidationProvider>
<button type="submit"> Send </button>
</ValidationObserver>
</template>
<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
data() {
return {
myTextInput:''
};
},
methods: {
async submit() {
const isValid = await this.$refs.contact.validate()
if (!isValid) {
return
}
this.$refs.contact.submit()
},
},
}
</script>