How To Merge Objects In Vue

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:

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!