使用vue @submit指令时FormData对象为空

cwtwac6a  于 2023-02-05  发布在  Vue.js
关注(0)|答案(1)|浏览(170)

我遇到了一些奇怪的边缘情况,我把它缩小到一个解决方案。我用vue创建了一个表单,空字符串被发送到服务器。我把它缩小到@submit指令。如果我写form.addEventListener('submit'),一切都正常工作,但用@submit指令就不工作了。
解决方案是使用addEventListener方法,但我不确定是我在这里做错了什么,还是这是vue的v-on指令的一个bug
可运行示例:https://stackblitz.com/edit/web-platform-izreva?file=index.html

    • 注意**:我了解表单数据对象以及如何使用
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value})
}

在下面的代码片段中,如果您取消注解代码,则它将与addEventListener一起工作。
x一个一个一个一个x一个一个二个x

goqiplq2

goqiplq21#

我想这是CDN版本的Vue如何从现有HTML解析模板的问题。
每个元素都替换为Vue编译的元素等效项。
您在开始时捕获的form不再是发出 submit 事件的form,您可以通过比较form === e.target轻松地检查这一点。
如果您使用以下命令,它将按预期工作。

const formData = new FormData(e.target);

简而言之,你正在以一种非常“非Vue”的方式做事,所以你遇到一些摩擦并不奇怪。

相关问题