Vue Js Add new item start of array | unshift Array Method

Vue Js Add New Item start of array :To add a new element at the beginning of an array in Vue.js, you can use the unshift() method. This method accepts one or more parameters that represent the new element(s) to be added.

When you call the unshift() method, the existing elements of the array are shifted to the right, and the new element(s) are inserted at the beginning. As a result, the index of each element in the array is increased by one.

By using this method, you can add new elements to the array's beginning. Keep in mind that the unshift() method modifies the original array. If you want to learn how to use this method in Vue.js to insert new elements at the start of an array, you can follow our tutorial. Additionally, you can use our online editor to edit and run the code.

written

reviewed

updated

In Vue.js, what is the process for adding items to the beginning of an array?

This code is using the Vue.js framework to create a web app. The app has a button and a paragraph tag with dynamic content. When the button is clicked, a method is called that adds two elements to the beginning of an array called "title". The resulting length of the array is then stored in a variable called "result", which is also part of the data object. The updated "title" array is then displayed in the paragraph tag using Vue's data binding syntax.

Vue js add item to start of array Example

<div id="app">
  <button @click="addFun">click me</button>
  <p>{{title}}</p>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
      data()
      { 
        return{ 
        title:['Vue','React','Angular','Node'],
        result:''
      } 
     }, 
     methods:{ 
         addFun(){ 
            this.result = this.title.unshift('HTML','CSS'); 
           },
         }
    }).mount('#app')
  </script>

Run

Output of above example

What is the syntax to insert a new property at the beginning of an object in Vue.js?

This code is a Vue.js script that creates a new application instance and mounts it to an HTML element with the ID "app". The application instance has a data property that includes an array of objects with two key-value pairs each. It also has a result property. The methods property includes a function called addFun, which adds a new object to the beginning of the demoObject array and sets the result property to the updated array.

Vue Js add New Property starting of array of object Example

<div id="app">
   <button @click="addFun">click me</button>
   <P>Object Property:</P>
   <p v-for="object in demoObject">{{object}}</p>
   <p>String: {{result}}</p>
</div>
 <script type="module">
import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
        demoObject:[{
           s_no:1,
           title:'Sarkari Naurkri Exams'
          },
          {
           s_no:2,
           title:'Font Awesome Icons'
          },
          {
            s_no:3,
            title:'Schools Geek'
          },
          {
            s_no:4,
            title:'Tutorials Plane'
          }
        ],
        result:''
      } 
     }, 
     methods:{ 
         addFun(){ 
            this.result = this.demoObject.unshift({s_no:0,title:'Digital Invitation Card'}); 
           },
           
          
        }
    }).mount('#app')
  </script>

Run

Insert two elements at the beginning of an array using Vue.js.

To insert an element at the beginning of an array in Vue, utilize the unshift() function and provide the element as a parameter. This will place the element at the first index of the array. The unshift() method of an Array adds one or more elements to the start of an array and returns the new length of the array. Below is an example of how Vue.js can be used to add one or more elements to the beginning of an array.

Vue Js add two Elements beginning of array | Example

<div id="app">
  <button @click="addFun">click me</button>
  <p>{{array}}</p>
  <p>No of items: {{result}}</p>
 </div>
<script type="module">
import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
        array:['India','Pakistan','America','England','Africa'],
        result:''
      } 
     }, 
     methods:{ 
         addFun(){ 
            this.result = this.array.unshift('Australia','Denmark'); 
           },
         }
    }).mount('#app')
  </script>

Run

VueJs Tutorial

Vue Js Add new item start of array | unshift Array Method

Feedback for Abhishek

In Vue.js, what is the process for adding items to the beginning of an array?

Vue js add item to start of array Example

Output of above example

What is the syntax to insert a new property at the beginning of an object in Vue.js?

Vue Js add New Property starting of array of object Example

Insert two elements at the beginning of an array using Vue.js.

Vue Js add two Elements beginning of array | Example

Output of above example