VueJS испортил мою форму отправки, удалив все данные поста - PullRequest
Новая
       3

VueJS испортил мою форму отправки, удалив все данные поста

0 голосов
/ 17 сентября 2018

По какой-то причине VueJS теперь испортил мою отправку формы, удалив данные записи из функции Ajax serialize ().

Я думаю, это может быть потому, что я использую Ajax и Jquery, но я не уверен, как это исправить.

Этот код работает нормально, когда я не использую VueJS 

<script>

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

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

Однако, добавив мой код VUE, он больше не передает данные формы 

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

Части HTML 

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

Любые мысли о том, почему VueJS может испортить мойФорма отправки?Или он просто не совместим с Ajax / Jquery?

ОТВЕТ: Похоже, ответ заключается в том, что мне нужен <div id="app"> внутри тега <form>.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

В общем, я предлагаю вам отойти от jquery при выполнении проекта vue.По какой-то причине вы получаете странный взгляд на энтузиастов vue, как только они обнаруживают некоторый код jquery в вашем проекте.

Компонент Vue + система Virtual DOM сильно отличается от методов манипулирования DOM в jQuery.В Vue вы изменяете данные, и ваши шаблоны должны обновляться автоматически, при этом jQuery, вы обновляете данные, обновляете DOM самостоятельно.

Поэтому обновление DOM с помощью jQuery не рекомендуется, потому что в следующий раз визуализация Vue -он уничтожит то, что вы сделали с помощью jQuery.

Вы МОЖЕТЕ все же вносить jquery в свои компоненты Vue, но это не рекомендуется, также вы получаете больший пакет, чем jquery (87kb) размером сvue as whole (86kb).

В плане перехода от jquery к vue я могу порекомендовать вам статью с большим количеством примеров.https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/

0 голосов
/ 17 сентября 2018 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...