{

How to remove an element from an array in vuejs component


In this post, Step by step guide for removing an element from an array in Vuejs.

Other versions available:

Remove element from array in vuejs

There are multiple approaches to deleting an item from an array in vuejs or javascript.

If you are removing an element from an array, the original array is not mutated and it just returns the newly created array.

splice method removes the object from an array

splice is an inbuilt method in an array, used to remove an element from an array and return a new array with the removed list.

Syntax

splice(startindex)
splice(startindex, countofelements)

the start index is a starting index at which the array index element is deleted. count of elements is the number of elements to be removed from a start index

So, you can be removed with splice using index and object

Let’s declare an array in vuejs of data function

 employees: [
            { name: 'John', id: 1 },
            { name: 'Eric', id: 3 },
            { name: 'Rob', id: 4 },
            { name: 'Andrew', id: 8 }
        ]

In the following example, remove an object from an array using index

In the template, a List of objects are displayed using the v-for directive with index syntax

Iterating an array with object and index syntax.

<ul class="list-group" v-for="(emp,index) in employees">
{{emp.name}}
</ul>

To delete an object from an array, pass the index method to @click event hander

<button type="button"  @click="removeEmployeeByIndex(index)">Delete By Object</button>
  this.employees.splice(index, 1); remove an starting index position element 
    removeEmployeeByIndex: function(index){
      this.employees.splice(index, 1);
  }

Delete an object directly from an array using the array filter method

It is another way of removing an element. It does not mutate the original array, but it will return a new list by removing an array object.

filter in array filters the element to remove and return new array without an element

    removeEmployeeByObject: function(emp){
      const filtersList = this.employees.filter(element => element !== emp)
      this.employees=filtersList
    },

Here is an complete vuejs example to remove an object from an array

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul class="list-group" v-for="(emp,index) in employees">
      <li>
        {{ emp.name }}

        <button type="button"  @click="removeEmployeeByObjectremoveEmployeeByIndex(index)">Delete By Index</button>
        <button type="button"  @click="removeEmployeeByObject(emp)">Delete By Object</button>

      </li>

  </div>
</template>

<script>
  export default {
  name: 'HelloWorld',
  data(){
    return{
    employees: [
            { name: 'John', id: 1 },
            { name: 'Eric', id: 3 },
            { name: 'Rob', id: 4 },
            { name: 'Andrew', id: 8 }
        ]
  }},

  props: {
    msg: String
  },
  methods:{
    removeEmployeeByObject: function(emp){
      const filtersList = this.employees.filter(element => element !== emp)
      this.employees=filtersList
    },
    removeEmployeeByIndex: function(index){
      this.employees.splice(index, 1);
  }

  }
}
</script>

vue delete method

For Vue 2.2.0 + version, use vue.delete

Here is an syntax

Vue.delete( object/array, name/index )

The first parameter is an object iteration or array The second parameter is an index or a property name of an object

Inside javascript code, create a method for removing an object

with the delete method, You can remove a property from an object or element from an array.

If you are removing an property from object, It trigger the view updates reactively.

deleteEmpl: function(index){
    this.$delete(this.employees, index)
}
``
by deleting an object from the array, It triggers view updates reactively.


## Conclusion,

In this tutorial, you learned multiple ways to remove an object from an array in the vuejs application
- Splice method with index approach
- remove by value using Array filter 
- vue delete 

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.