Axios投稿全体から。 （Vue.js）

Question

フィールドを指定するのではなくフォーム全体を投稿する方法はありますか？私はどこかでそれを見たと思ったが、今はそれを見つけることができない。

jQueryの中のこのようなビットは：

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

これはVue.jsコンポーネントです。

ミック

Answer 1

1. あなたがVueJSを使用している場合は、すべてのフォームフィールドのv-modelを使用する必要があります。 https://vuejs.org/v2/guide/forms.html
2. あなたdata()オブジェクトで作成がformまたは類似した何かと呼ばれ、JSONとしてすべて一緒v-model='form.fieldName'
3. ポストを使用this.axios.post('url', this.form).then(...

Answer 2

で一つの可能​​な解決策は、@MUで述べたように、オブジェクトに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>

：あなたはdinamically入力を作成しているし、あなたが/ v-modelを使用して、これらの入力をバインドしたくないことができないとき

別にv-modelから、あなたはまた、例えば、ネイティブFormDataオブジェクトを使用することができます