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

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

This post provides a detailed, step-by-step guide on how to remove an element from an array in Vue.js.

Other versions available:

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.

Using the splice method

The splice method is an array function that removes an element and returns a new array. It takes the start index and, optionally, the count of elements to remove.

Syntax:

splice(start index)
splice(startindex, countofelements)

The start index represents the initial position from which an element in the array is to be deleted. The count of elements denotes the number of elements to be removed from the specified starting index.

To achieve this removal, the splice method can be used, utilizing both the index and object parameters.

For practical application, consider declaring an array within the data function in Vue.js.”

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

In the following example, you can remove an object from an array by utilizing its index.

The template displays a list of objects through the v-for directive, employing the index syntax.

The array is iterated using 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 element with a given index position

    removeEmployeeByIndex: function(index){
      this.employees.splice(index, 1);
  }

Using the Array Filter Method

The filter method generates a new array by excluding a specified element. This operation does not alter the original array; instead, it produces a new list by omitting the specified array object.

When using filter on an array, it selectively removes the specified element and returns a fresh array without that particular 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 vue delete method

For Vue 2.2.0 + version, use vue.delete🔗

Here is a syntax

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

The first parameter can be either an object iteration or an array. The second parameter represents either an index or a property name of an object.

Within the JavaScript code, create a method for removing an object.

Using the delete method, you have the capability to remove a property from an object or an element from an array.

When removing a property from an object, it triggers reactive updates to the view and component reloads.

deleteEmpl: function(index){
    this.$delete(this.employees, index)
}

by deleting an object from the array, It triggers view updates reactively.

Conclusion

In this tutorial, we explored multiple methods to remove an object from an array in a Vue.js application:

  • Splice method using the index approach
  • Remove by value using the Array filter method
  • Vue delete method for reactive removal