中移除阻止默认浏览器动作
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
我想在提交表单时调用new Vue中定义的send方法，但是当我提交表单时，页面正在重新加载。
我已经创建了一个Vue对象并将其链接到聊天元素。
有趣，我刚刚帮助某人解决了一个类似的问题，Vue.2.0的语法是v-on:submit="send"而不是v-on="submit: send"。我们已经有一种停止表单提交的方法:v-on:submit.prevent，所以你不需要e.preventDefault，你会得到:
<form v-on:submit="send" v-on:submit.prevent>
或更短的版本:
<form v-on:submit.prevent="send">
这里还有一些问题，所以我将为您过一遍:
首先，您从未提交表单。要提交表单，您需要一个提交输入，而不是一个按钮:
<input type="submit" value="Send" />
然而，在我看来，你甚至不需要表单，只需要使用一个带有v-on:click:
的按钮就可以了。<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
然后从视图模型中获取提交的内容:
send: function()
{
alert(this.message);
}
您还应该使用控制台(在浏览器的开发人员工具下)并记录任何输出，而不是警报(console.log(this.message))，因为它还会嗅出代码中的任何一般错误-例如，我可以看到您还有一个打字错误(我经常犯的错误)，它是data而不是date:
data: {
message: ''
},
好的，这个呢
<form @submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
然后你可以从你的send()方法