CODEWITHSUNDEEP
javascriptnode.jsexpressvue.jspreventdefault
William Park
William Park

Reputation: 1767

Vue.js + Express: Cannot get .prevent / e.preventDefault() to work?

I've been trying to mash Vue.js and Express together, to use for small apps.

I'm currently tearing my hair out trying to get the client to send data to the server via a form, without refreshing the page. Obviously, I look to e.preventDefault()

Vue.js, according to the documentation here allows you to do this using an event modifier, which I've tried:

form(id="myForm", method="POST", action="/", v-on:submit.prevent="submitForm")

(I'm also using Jade/Pug as my template engine)

As you can see, I'm using the prevent modifier in the exact same way as in the documentation, and the method "submitForm" IS being called, it is just not preventing the refresh.

I went a bit deeper and tried the old school vue.js method, which is passing the event argument directly into the submitForm method, to try directly hit it with preventDefault()

submitForm: function(e) {
      e.preventDefault();
      document.getElementById("myForm").submit();
      console.log("Called!");
}

But this still doesn't stop the page reloading. Any help or tips?

Upvotes: 0

Views: 394

Answers (1)

William Park
William Park

Reputation: 1767

document.getElementById("myForm").submit(); This was the cause. It's not just going to submit the data, it's going to do everything a submit button would do.

Look into AJAX if you're in my position.

Upvotes: 1

Related Questions