我们在Vue应用程序中有一个表单,用于将数据提交给Netlify。一切似乎正常,但是Netlify仪表板中没有表单或提交内容。
我们遵循了netlify网站上有关Vue应用(LINK1)的指南以及在stackoverflow(LINK2和LINK3)上发现的类似问题的解决方案,但似乎没有工作。
代码如下:
表格
div(class="input")
form(method="post" @submit.prevent="submitForm")
input(type="hidden" name="form-name" value="ask-question")
input(type="text" name="name" :label="name" v-model="contactInput.name")
input(type="text" name="email" :label="email" v-model="contactInput.email")
input(type="text" name="phone" :label="phone" v-model="contactInput.phone")
textarea(solo name="message" :label="message" v-model="contactInput.message" no-resize)
v-btn(type="submit" color="info") {{Submit}}
功能
private encode(data: any) {
return Object.keys(data)
.map(
key => ${encodeURIComponent(key)}=${encodeURIComponent(data[key])}
)
.join('&');
}
private submitForm(){
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: this.encode({ 'form-name': 'ask-question', ...this.contactInput }),
})
.then((data) => alert("Success!")
.catch(error => alert(error));
}
我们希望看到成功! Netlify仪表板中显示消息,表单和提交。经过测试,我们看到了成功!消息,但根据“表单”部分在Netlify的仪表板中什么都没有。