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:

ReactJS example

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

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

splice method remove object from array

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

Syntax

splice(startindex)
splice(startindex, countofelements)

startindex is an starting index at which array index element is deleted countofelements is number of elements to be removed from an startindex

So, you can 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 array using index

In the template, List of objects are displayed using 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 array filter method

This is another way of removing an element. This does not mutates the original array but it will return 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 )

First parameter is an object iteration or array Second parameter is index or an property name of an object

Inside javascript code, create an method for remove an object

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

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

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


## Conclusion,

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

How to remove an element from an array in vuejs component

splice method remove object from array

Delete an object directly from an array using array filter method

vue delete method

VueJs - How to add google fonts library with step by step

Vuejs Input type url form Validation example

VueJs - How to add google fonts library with step by step