v-on:submit.prevent 不停止表单提交答案

【问题标题】：v-on:submit.prevent not stopping form submissionv-on:submit.prevent 不停止表单提交
【发布时间】：2017-04-11 19:11:21
【问题描述】：

我对 Vue 很陌生，这将是我第二个尝试了解它的虚拟项目。

我目前有一个表单，我正试图阻止表单提交，根据文档，我可以使用v-on:submit.prevent 做到这一点。

我已将它添加到我的表单标签中，但是在提交表单时它仍在处理并且根本没有被阻止。

我目前使用的是 Vue 2.1.3 及以下版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node JS Server</title>
</head>
<body id="chat">
    <form v-on:submit.prevent="send">
        <input>
        <button>Send</button>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.6.0/socket.io.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>

    <script>
        var socket = io();

        new Vue({
            el: '#chat',

            methods: {
                send: function(e) {

                    alert('Send method!');

                }
            }
        })
    </script>
</body>
</html>

我做错了什么？据我从文档中可以看出，表单不应该提交。

编辑

这是一个fiddle，其中包含代码

【问题讨论】：

您是否在控制台中收到任何错误？
@Soviut 控制台没有错误。
相关Bind Vue on body or others element

标签： javascript html vue.js

【解决方案1】：

这是工作小提琴：https://jsfiddle.net/xje4r1u8/2/

您需要在 HTML 中进行以下更改：

<div id="chat">
    <form v-on:submit.prevent="send">
       <input>
       <button>Send</button>
    </form>
</div>

在您的 HTML 中，<body id="chat"> 导致了问题，将其替换为 div 解决了问题。

【讨论】：

您能解释一下body和表单提交事件处理程序之间的关系吗？
Vue 无法挂载，因为它不想将 body 用作根元素。所以事件处理程序从未真正分配过。 See docs note for el.

【解决方案2】：

这是一种奇怪但符合标准的行为：如果表单只包含一个输入，它将总是提交，而preventDefault() 将不会阻止这种情况。

请看这里：Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?

解决方案：用type="hidden"添加另一个输入

【讨论】：

一个很晚的评论，但这个答案是第一个谷歌搜索问题：这解决了我的问题。但是输入 type="hidden" 对我不起作用，我会添加一个带有 display:none 的普通输入，这就解决了问题