CODEWITHSUNDEEP
jqueryajaxvue.js
kevinkt
kevinkt

Reputation: 745

VueJS messing up my form submit, removing all post data

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.

Upvotes: 0

Views: 274

Answers (2)

niclas_4
niclas_4

Reputation: 3674

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/

Upvotes: 0

Vasu
Vasu

Reputation: 129

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>

Upvotes: 0

Related Questions