Axios全部发布。 (Vue.js)

时间:2017-06-26 11:58:17

标签: vue.js axios

有没有办法发布整个表单,而不必指定字段?我以为我曾经在某个地方看到它,但现在找不到它。

在JQuery中有点像这样:

$.ajax({
    data: $("form").serialize(),
    //etc.
});

这是在Vue.js组件中。

米克

3 个答案:

答案 0 :(得分:2)

一种可能的解决方案是将v-model@MU中提到的对象一起使用。

除了v-model之外,您还可以使用原生FormData对象,例如,当您有动态创建的输入时,您不能/不想使用绑定这些输入v-model



new Vue({
  el: '#app',
  methods: {
    submit: function () {
      const formData = new FormData(this.$refs['form']); // reference to form element
      const data = {}; // need to convert it before using not with XMLHttpRequest
      for (let [key, val] of formData.entries()) {
        Object.assign(data, { [key]: val })
      }
      console.log(data);
      axios.post('https://jsonplaceholder.typicode.com/posts', data)
        .then(res => console.log(res.request.response))
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <form ref="form" @submit.prevent="submit">
    <input type="text" name="name">
    <input type="number" name="age">
    <button type="submit">Submit</button>
  </form>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

  1. 如果您使用的是VueJS,则应对所有表单字段使用v-modelhttps://vuejs.org/v2/guide/forms.html
  2. 在名为data()的{​​{1}}对象或类似内容中创建并使用form
  3. 将所有内容作为JSON与v-model='form.fieldName'
  4. 一起发布

答案 2 :(得分:0)

<form v-on:submit.prevent="getAllData" id="frm">    
      <input name="input1" placeholder="edit me">
      <input name="input2" placeholder="edit me">
      <input name="input3" placeholder="edit me">
      <input name="input4" placeholder="edit me">
      <input type="submit" >Send</input>
</form>


<script>
   ....
   //your method parts
   methods:{
      getAllData(){
      
         let myForm = document.getElementById('frm'); 
         let formData = new FormData(myForm);
         const data = {}; 
         // need to convert it before using not with XMLHttpRequest
         for (let [key, val] of formData.entries()) {
               Object.assign(data, {[key]: val})
         }
         console.log(data);
       },
    }
   ....
<script>