Best 3 ways to remove an element from an array in vuejs component

This post, Step by step-by-step guide on How to remove an element from an array in Vuejs.

Other versions available:

ReactJS Remove element from array example

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.

How do I remove an item from an array in the VueJS application

There are multiple ways we can remove an array.

One way using the splice method that returns a new array by deleting an element. The second way using the Array filter method The third way using the vue delete method.

Delete an array element using the splice method

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(start index)
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 a splice using index and object

Let’s declare an array in vuejs of the 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 the index.

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

Iterating an array with the 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);
  }

How to 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 a new array without an element.

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

Here is a 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>

using the vue delete method to remove an element from the array

For Vue 2.2.0 + version, use vue.delete🔗

Here is a 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 the 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 the property from an object, It triggers 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