Home » How To Merge Objects In Vue

How To Merge Objects In Vue

Last updated on December 24, 2020 by

Often, a developer needs to merge the different data into a single one while sending the HTTP request (GET, POST, DEL, etc.). Unlike other programming languages, you can easily merge objects in Vue. So let’s just go through it.

Table of Contents
1. Merge Objects Using Object.assign() method
2. Real-World Example Of Merging Two Objects in Axios Request
3. Merge Objects Using The Spread Operator (…)

01 Merge Objects Using Object.assign() method

Obviously, Vue is a JavaScript’s progressive framework so we can use the same functions of JavaScript here to merge the objects in Vue.

The Object.assign() method is used to copy one or more objects into another object.

Syntax:

Object.assign(target, Obj1, Obj2, ...);

Simple Example:

  this.user = Object.assign( {}, this.user, this.profile );

Real-World Example Of Merging Two Objects in Axios Request

The following example uses the Object.assign() to merge the user and profile objects into the single user object:

<template>
   <form action="action_page.php">
      <div class="container">
         <h1>Register</h1>
         <p>Please fill in this form to create an account.</p>
         <hr>
         <label for="email"><b>Email</b></label>
         <input type="text" placeholder="Enter Email" name="email" id="email" v-model="user.email">
         <label for="psw"><b>Password</b></label>
         <input type="password" placeholder="Enter Password" name="psw" id="psw" v-model="user.psw">
         <label for="psw-repeat"><b>Repeat Password</b></label>
         <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" v-model="user.confirm">
         <hr>
         <h1>Profile</h1>
         <p>Please fill in this form to create an account.</p>
         <hr>
         <label for="name"><b>Name</b></label>
         <input type="text" placeholder="Enter Name" name="name" id="name" v-model="profile.name">
         <label for="city"><b>City</b></label>
         <input type="text" placeholder="Enter City" name="city" id="city" v-model="profile.city">
         <label for="designation"><b>Designation</b></label>
         <input type="text" placeholder="Enter Designation" name="designation" id="designation" v-model="profile.designation">
         <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
         <button type="submit" @click="register" class="registerbtn">Register</button>

         <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
      </div>
      <div class="container signin">
         <p>Already have an account? <a href="#">Sign in</a>.</p>
      </div>
   </form>
</template>

<script>
	export default {

		data: function() {
			return {
		    	user: {
		    		email: null,
		    		psw: null,
		    		confirm: null,
		    	},
		    	profile: {
		    		name: null,
		    		city: null,
		    		designation: null,
		    	},
		    	loading: false,
		    };
		},
		methods: { 

			register: function() {

				this.loading = true;

				this.user = Object.assign( {}, this.user, this.profile );

				this.$axios.post(this.$site_url + '/register', this.user )
		        .then(response => {
		            console.log(response.data.result);
		            thenis.loading = false;
		        })
		        .catch(e => {
		            if (typeof e.response !== 'undefined') {
		                this.errors = e.response.data.errors;
		            }
		            this.loading = false;
		        })
			}		
		}
	};
</script>

Let’s see a very simple example of profile and job objects and merge them into the employee object using Object.assign() methods:

let profile = {
    firstName: 'John',
    lastName: 'Doe',
    age: 37,
    city: 'London',
};

let job = {
    designation: 'Data Analyst',
    company: 'Google'
};

let employee = Object.assign(profile, job);

console.log(employee);

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 37,
    city: 'London',
    designation: 'Data Analyst',
    company: 'Google'
}

Please note that if objects have the same properties with name, then the right-most object property will overwrite the previous one.

02 Merge Objects Using The Spread Operator (…)

You can also use JavaScript’s spread operator (…) which can be used to merge two or more objects and create a new one that has properties of the merged objects.

The following example uses the spread operator (…) to merge the profile and job objects into the employee object:

let profile = {
    firstName: 'John',
    lastName: 'Doe',
    age: 37,
    city: 'London',
};

let job = {
    designation: 'Data Analyst',
    company: 'Google'
};

let employee = {
    ...profile,
    ...job
};

console.log(employee);

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 37,
    city: 'London',
    designation: 'Data Analyst',
    company: 'Google'
}

That’s it for now. We hope this article helped you how to merge objects in Vue.

Additionally, read our guide:

  1. How to Select Data Between Two Dates in MySQL
  2. Error After php artisan config:cache In Laravel
  3. Specified Key Was Too Long Error In Laravel
  4. AJAX PHP Post Request With Example
  5. How To Use The Laravel Soft Delete
  6. How To Add Laravel Next Prev Pagination
  7. cURL error 60: SSL certificate problem: unable to get local issuer certificate
  8. Difference Between Factory And Seeders In Laravel
  9. Laravel: Increase Quantity If Product Already Exists In Cart
  10. How To Calculate Age From Birthdate
  11. How to Convert Base64 to Image in PHP
  12. Check If A String Contains A Specific Word In PHP
  13. Dynamically Populate A Select Field’s Choices In ACF
  14. How To Find Duplicate Records in Database
  15. Difference between del, remove and pop on lists
  16. How To Solve NPM Start Script Missing Error
  17. How To Declare A Global Variable in Vue
  18. Best Way to Resize Google reCAPTCHA

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance 🙂. Keep Smiling! Happy Coding!

 
 

Leave a Comment