Vuejs - 如何从两个组件提交数据

Question

I have 2 forms component and I want when to click Save then data of form1 and form2 will submit to the server in one request. Thanks!

My code:

<template>
  <div>
    <form1></form1>
    <form2></form2>
    <button type="button" @click="saveData()">Save</button>
  </div>   
</template>
<script>
export default {
    methods: {
      saveData() {
       //post data form1 and form2 to server
      }
    }
  } 
</script>

Answer 1

Untested, but something like this should do the trick

form1 and form2 as templates in separate files to avoid cluttering, data propery being the container for the form data for that particular area bound to controls with the v-model directive

<template>
  <div>
    <my-form1 :data="myFormData.form1Data"></my-form1>
    <my-form2 :data="myFormData.form2Data"></my-form2>
    <button type="button" @click="saveData()">Save</button>
  </div>   
</template>
<script>
import MyForm1 from 'MyForm1';
import MyForm2 from 'MyForm2';

export default {
    components: {
        MyForm1,
        MyForm2
    },
    data () {
        return {
            myFormData: {
                form1Data: {
                    prop: "my-prop-value":
                ,
                form2Data: {
                    prop: "my-other-prop-value":
                }               }
            },
        };
    },  
    methods: {
      saveData() {
        //send myFormData here
      }
    }
  } 
</script>

Example form1 template:

<template>
    <div>
        <textarea v-model="data.prop" placeholder="write something.."></textarea>
    </div>
</template>
<script>
export default {
    props: {
        data: Object
    }
}
</script>