James James - 4 days ago 5
HTML Question

v-on:submit.prevent not stopping form submission

I'm quite new to Vue and this will be my second dummy project in efforts to learn more about it.

I currently have a form and I am trying to prevent form submission, according to the docs I can do this with

v-on:submit.prevent
.

I have added this into my form tag, but when submitting the form it is still going through and is not being prevented at all.

I am using Vue version 2.1.3 and below is what I have so far:

<!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>


What am I doing wrong? As far as I can see from the docs, the form should not submit.

Edit

Here's a fiddle with the code in it

Answer

Here is the working fiddle: https://jsfiddle.net/xje4r1u8/2/

You need to make following changes in HTML:

<div id="chat">
    <form v-on:submit.prevent="send">
       <input>
       <button>Send</button>
    </form>
</div>    

in your HTML, you had <body id="chat"> which was causing problem, replacing this with div solved the problem.

Comments