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.
In this post, Step by step guide for removing 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.
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
