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

我对Vue很新，这将成为我第二个了解更多关于它的虚拟项目。v-on：submit.prevent不停止表单提交

我目前有一个表格，我试图阻止表单提交，根据文档我可以做到这一点与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它

来源

2016-11-28 James

你在控制台收到任何错误？ – Soviut

@Soviut控制台中没有错误。 – James

这里是工作提琴：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代替这个解决了这个问题。

来源

2016-11-28 06:06:20 Saurabh

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

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

解决方法：添加annother输入与type="hidden"

来源

2016-11-28 09:29:26

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

回答

相关问题