James James - 1 year ago 218
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


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">
<meta charset="UTF-8">
<title>Node JS Server</title>
<body id="chat">
<form v-on:submit.prevent="send">

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

var socket = io();

new Vue({
el: '#chat',

methods: {
send: function(e) {

alert('Send method!');


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


Here's a fiddle with the code in it

Answer Source

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download