Question

69

v-on:submit.prevent not stopping form submission

rated 0 times [ 72] [ 3] / answers: 1 / hits: 22930 / 8 Years ago, mon, november 28, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ericmaximilianz

Add To Favorites

Follow

Total Points: 252

Total Questions: 118

Total Answers: 87

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 8 Years ago zaynerogerb · Accepted 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.