Jam*_*mes 7 html javascript vue.js
我对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>
我究竟做错了什么？从文档中我可以看出,表格不应该提交.
编辑
这里是代码中的小提琴
这是一种奇怪但符合标准的行为：如果表单仅包含一个输入，它将始终提交，并且preventDefault()不会阻止这种情况。
请参阅此处：为什么带有一个文本输入的表单会在输入时提交，而带有两个文本输入的表单则不会？
解决方案：添加另一个输入type="hidden"
这是工作小提琴: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解决问题.