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不停止表單提交

回答

相關問題