[Vuejs]-VueJS messing up my form submit, removing all post data

by

0👍

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>

0👍

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/

Leave a comment