How to remove an item from array in Vue component

In this post, we will see how we can remove items from an array in Vue JS component.

To remove an item from an array we can use the splice() method in Vue.

The splice() method is an inbuilt JavaScript method that is used to add or remove an element from an array. The Array.splice() method overwrites the original array.

Syntax:

splice(startindex, deleteCount)

The startindex is the index of the item that you want to be deleted.

The deleteCount is the number of items that you want to remove from the startindex.

Now, we can use this method in our Vue application to delete any item from an array by its index.

Delete an item from an array by its index in Vue

Let's say we have an array in our data property.

data() {
    return {
      myArray: ["tiger", "cat", "dog", "crow"],
    };
 },

Now we can use the v-for to iterate the array item in our Vue template.

<li v-for="(item, index) in myArray" :key="index">
    {{ item }}
</li>

Next, we have added a deleteItem() function with the @click event handler, which passes the index of the clicked element.

In the method property,

methods: {
    deleteItem(index) {
      this.myArray.splice(index, 1);
    },
 },

Here, the function receives the index and removes the item in that index from the array using this.myArray.splice(index, 1).

Delete object from an Array in Vue using an object property

To remove an object from an array we will use the filter() method in Vue.

The Array.filter() method creates a shallow copy of the given array that consists of all the elements that have passed a specific test provided by a function. It does not change the original array.

Example:

Here, let's say we have an array of objects in our data property.

data() {
    return {
      students: [
        {
          id: 1,
          name: "Jake",
          sub: "English",
        },
        {
          id: 2,
          name: "Jimmy",
          sub: "Science",
        },
        {
          id: 3,
          name: "Tom",
          sub: "Math",
        },
      ],
    };
 },

Now we will use v-for to iterate the data and display it in our Vue template.

Next, we will add the delete button with a click event handler, to trigger the deleteObj() function.

<ul>
   <li v-for="student in students" :key="student.id">
     <span>Name: {{ student.name }}</span> | subject: {{ student.sub }}
     <button @click="deleteObj(student.id)">Delete</button>
   </li>
</ul>

In the deleteObj() function, we pass the id property of the student object like this @click="deleteObj(student.id)" .

In the method property,

methods: {
     deleteObj(id) {
      let updateStudentList = this.students.filter((el) => el.id !== id);
      this.students = updateStudentList;
    },
 },

Here, we get the id of the student when the button is clicked and then we filter the students array using this.students.filter((el) => el.id !== id) . It remove the item and create a new array.

In the updateStudentList variable, we store all the objects whose id is not equal to the clicked student id.

Next, using this.students = updateStudentList , we assign the updateStudentList array to the students array.

And the updated array of objects is rerendered to the Vue template.

Conclusion:

So using Array.splice() and the Array.filter() method, we can remove an element from an array in Vue component.

Demo:

<a href="https://codesandbox.io/s/suspicious-pine-jz4p37?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit jz4p37" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>