Question

由于某种原因，VueJS现在通过擦除Ajax serialize（）函数中的发布数据来弄乱我的表单提交。

我认为可能是因为我正在使用Ajax和Jquery，但是我不确定如何解决。

当我不使用VueJS时，此代码可以正常工作

1
2
3
"4,5,6"
7
8

但是，通过添加我的VUE代码，它不再提交表单数据

<script>

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

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

HTML的一部分

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

关于VueJS为什么会弄乱我的表单提交的任何想法？还是与Ajax / Jquery不兼容？

答案：看来答案是我需要在<div id="app"> <form method="post" id="form" enctype="multipart/form-data" onSubmit="return false;">  </form></div>标记内使用<div id="app">。

Answer 1

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>

Answer 2

通常，我建议您在执行Vue项目时远离jquery。出于某种原因，一旦vue发烧友在您的项目中发现了一些jquery代码，就会产生一种奇怪的外观。

Vue的组件+虚拟DOM系统与jQuery的DOM操作技术非常不同。在Vue中，您可以更改数据，然后     模板应该自动更新，其中jQuery是您更新的     数据，请自行更新DOM。


因此不建议使用jQuery更新DOM，因为下一个   Vue渲染的时间-它会抹去您使用jQuery所做的一切。

您仍然可以将jquery引入到Vue组件中，但不建议这样做，而且您会得到一个更大的Package，然后jquery（87kb）与vue一样大（86kb）。

关于从jquery转移到vue方面，我可以为您推荐带有很多示例的文章。 https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/

VueJS弄乱了我的表单提交，删除了所有帖子数据

2 个答案: