Vue Js Concat Array – In Vue.js, you can combine arrays using either the spread operator or the concat() method. Both of these methods create a new array instance that contains all the elements of the original arrays, without modifying the original arrays themselves.

However, it is important to note that the spread operator is generally more efficient and recommended for use in Vue.js, as it creates a new array instance that triggers Vue’s reactivity system. This helps to ensure that any changes to the combined array are properly detected and updated in the Vue.js template

Vue JS Merge two arrays

This is a Vue.js script that creates a new app with data properties called frontend, backend, and fullstack. The frontend property is an array that contains the values ‘HTML’, ‘CSS’, and ‘javascript’. The backend property is also an array that contains the values ‘PHP’, ‘codeigniter’, and ‘SQL’. The fullstack property is an empty array.

The script also defines a method called concatFunction that concatenates the frontend and backend arrays and assigns the result to the fullstack property.

When the app is mounted to an element with the ID of ‘app’, the concatFunction method is called, which combines the frontend and backend arrays and updates the fullstack property with the result.

Vue js Concat two Array Example

<div id="app">
    <h1>Vue Js Array Concat</h1>
    <p>To combine two or more arrays, use the concat() method.</p>
    
    <P>Frontend Developer : {{frontend}}</P>
    <P>Backend Developer :  {{backend}}</P>
    <P>Fullstack Developer : {{fullstack}}</P>
    <button @click="concatFunction">Concat Array</button>
  </div>
<script type="module">
    import { createApp } from 'vue'
   createApp({
      data()
     {
        return {
          frontend : ['HTML','CSS','javascript'],
          backend: ['PHP','codeigniter','SQL'],
          fullstack:[]
        }
     },
     methods:{
      concatFunction : function(){
       this.fullstack = this.frontend.concat(this.backend);
      }
     }
  }).mount('#app')
</script>

Output of above example will look something like this –

Vue js join Two array using spread operator

The spread operator allows you to expand an iterable object, such as an array or a string, into individual elements. By using the spread operator, you can easily concatenate two or more arrays without the need for traditional looping or concatenation methods.

In the context of Vue.js, the spread operator is commonly used to join two arrays into a new array. By spreading the elements of the arrays into a new array, you can create a new array that contains all the elements from the original arrays. This technique is useful when you need to combine data from multiple sources into a single array, such as when you are building a list of items to display in a Vue component

Vue js Spread operator concat arrays Example

 <div id="app" class='container-fluid'>
    <h1>Vue Js merge Array using Spread operator</h1>
    <p>To combine two or more arrays using spread operator</p>
    
    <P>First Name : {{firstName}}</P>
    <P>Last Name :  {{lastName}}</P>
    <P>Full Name : {{fullName}}</P>
    <button @click="concatFunction" class="btn btn-primary">Concat Array</button>
  </div>
<script type="module">
    import { createApp } from 'vue'

  createApp({
   data()
  { 
    return { 
          firstName : ['David'], 
          lastName: ['Root'], 
          fullName:[] 
         } 
  }, 
   methods:{ 
    concatFunction : function()
            { 
              this.fullName = [...this.firstName,...this.lastName]; 
               } 
  }
  }).mount('#app')
</script>

Output of above example will look something like this –