Question

我对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，其中包含代码

Answer 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解决了问题。

Answer 2

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

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

解决方案：使用type="hidden"

添加其他输入

v-on：submit.prevent不会停止表单提交

2 个答案: