Sometimes, we want to add and remove item from an array in components in Vue.js.

In this article, we’ll look at how to add and remove item from an array in components in Vue.js.

How to add and remove item from an array in components in Vue.js?

To add and remove item from an array in components in Vue.js, we can use JavaScript array methods.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    addRow() {
      this.rows.push({ description: "", unitprice: "", code: "" });
    },
    removeRow(index) {
      this.rows.splice(index, 1);
    },
  },
  //...
};
</script>

to call this.rows.push to append an entry to the this.rows reactive array.

And we call this.rows.splice with the index of the item we want to remove and 1 to remove the item in this.rows with the given index.

Conclusion

To add and remove item from an array in components in Vue.js, we can use JavaScript array methods.