Submitting data from two Vuejs components: A guide

Question

Submitting data from two Vuejs components: A guide

I have a scenario where I need to submit data from two different forms (form1 and form2) to the server in a single request when the Save button is clicked. How can I achieve this? Thanks for any help!

Here is the code I currently have:

<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>

javascript rest vue.js

Answer 1

Answer №1

Not tested yet, but a similar approach could work

Separate form1 and form2 as templates in different files to keep things organized. The data property will contain the form data specific to each area, bound to controls using 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>

Sample form1 template:

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

Answer 2

Not tested yet, but a similar approach could work

Separate form1 and form2 as templates in different files to keep things organized. The data property will contain the form data specific to each area, bound to controls using 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>

Sample form1 template:

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

Submitting data from two Vuejs components: A guide

Answer №1

Similar questions

Unable to deserialize an instance of java.util.List from the VALUE_STRING

Inquiries regarding vue-router and the addition of routes

Learn how to update a Vue.js method dynamically by using the route parameters

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

Sharing information with connections through a REST API

Using .get methods with jQuery's .on

What is the best method to retrieve the current time in minutes using the Timer component?

Can someone assist me in determining the UV mapping process from Ricoh Theta S Dual Fish Eye to a Three.js r71 SphereGeometry?

Displaying live data from an XMLHttpRequest in a Vue component in real-time

Is there a requirement to download and set up any software in order to utilize Highchart?

Storing Redux state in local storage for persistence within a React application

Render function in Next.js did not yield anything

Implementing a JQuery modal with backend coding

Guide on linking Influxdb information in a Vue application using node.js?

Passing React components between components using dot notation

Issue with npm version: 'find_dp0' is not a valid command

What is the most effective way to identify mobile browsers using javascript/jquery?

Issues with reloading when passing POST variables through Ajax requests

Using Jquery's closest technique to target a class located outside of the parent div

Can a hyperlink exist without a specified href attribute?