Sometimes, we want to remove an element from a list with Vue.js.

In this article, we’ll look at how to remove an element from a list with Vue.js.

How to remove an element from a list with Vue.js?

To remove an element from a list with Vue.js, we can use the JavaScript array splice method.

For instance, we write

<script>
export default {
  //...
  methods: {
    removeElement(index) {
      this.items.splice(index, 1);
    },
  },
  //...
};
</script>

to add the removeElement method that takes the index of the item we want to remove from the this.items array.

In it, we call this.items.splice with index and 1 to remove the item from this.items with the given index.

Conclusion

To remove an element from a list with Vue.js, we can use the JavaScript array splice method.