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:
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