VueJS messing up my form submit, removing all post data

Question

For some reason VueJS is now messing up my form submit, by erasing the post data from the Ajax serialize() function.

I think it may be because I am using Ajax and Jquery, but I'm not sure how to fix.

This code works fine when I'm not using VueJS

<script>

$(function(){
   $('#save').click(function () {
   $.ajax({type:'POST', 
   url: 'URL_HERE', 
   data:$('#form').serialize(), success: function(response) {
   alert('saved!');
   }});

   return false;
  });
});
</script>

However by adding my VUE code, it no longer submits form data

<script>
    new Vue({
      el: '#app',
      data: {
        bgColor: '#FFFFFF',
      }
  });
</script>

Parts of the HTML

  <div id="app">
    <form method="post" id="form" enctype="multipart/form-data" onSubmit="return false;">
   <!-- various inputs and things in here -->
    </form></div>

Any thoughts on why VueJS could be messing up my form submit? Or is it simply not compatible with Ajax / Jquery?

ANSWER: Looks like the answer is that I need the <div id="app"> inside of the <form> tag.

Bind an onclick event to your form submit and put your ajax call in there. — Waleed
– Waleed, Commented Sep 17, 2018 at 5:13
Looks like the answer is that I need the <div id="app"> inside of the <form> tag. — kevinkt
– kevinkt, Commented Sep 17, 2018 at 5:39
Not sure why you'd need the root element inside the <form>. It could also be outside the <form>, as shown in this codepen — tony19
– tony19, Commented Sep 17, 2018 at 5:50

Vasu · Accepted Answer · 2018-09-17 05:58:06Z

window.onload = (function(){
    
var app = new Vue({
      el: '#app',
      data: {
        name: ''
      },
      methods: {
          saveMessage() {
              return fetch('https://www.reqres.in/api/users', {
                method: "POST", // *GET, POST, PUT, DELETE, etc.
                mode: "cors", // no-cors, cors, *same-origin
                cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
                credentials: "same-origin", // include, same-origin, *omit
                headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    // "Content-Type": "application/x-www-form-urlencoded",
                },
                redirect: "follow", // manual, *follow, error
                referrer: "no-referrer", // no-referrer, *client
                body: JSON.stringify({
                    'name': this.name
                }), // body data type must match "Content-Type" header
            })
            .then(response => console.log(response.json()));
          }
      }
    })
    
})

<!DOCTYPE html>
<html>
	<head>
		<title>Vue.js test</title>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
        <div id="app">
            <form method="post" id="form" enctype="multipart/form-data" onSubmit="return false;">
                <input v-model='name' type="text" placeholder="name" />
                <button @click="saveMessage">Save</button>
            </form>
        </div>
	</body>
</html>

niclas_4 · Accepted Answer · 2018-09-17 06:10:16Z

In general i suggest you to move away from jquery when doing a vue project. For a reason you get a weird look of vue enthusiasts once they spot some jquery code in your project.

Vue’s component + Virtual DOM system is very different from jQuery’s DOM manipulation techniques. In Vue, you change data, and your templates should update automatically, wherein jQuery, you update data, update DOM yourself.

So updating the DOM with jQuery is not recommended because the next time Vue renders - it will wipe out what you did with jQuery.

You CAN still bring jquery into your Vue Components but it is not recommended, also you get a bigger Package then with jquery(87kb) being as big as vue as whole (86kb).

In terms of moving away from jquery into vue i can recommend you an article with a lot of examples. https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/

Collectives™ on Stack Overflow

VueJS messing up my form submit, removing all post data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related