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