Sometimes, we want to add a copy of a persistent object to a repeated array with Vue.js.

In this article, we’ll look at how to add a copy of a persistent object to a repeated array with Vue.js.

How to add a copy of a persistent object to a repeated array with Vue.js?

To add a copy of a persistent object to a repeated array with Vue.js, we can use the object spread operator.

For instance, we write:

<template>
  <button @click="addItem">add</button>
  <div>{{ items }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      newItem: { name: "" },
      items: [],
    };
  },
  methods: {
    addItem() {
      this.items.push({ ...this.newItem });
    },
  },
};
</script>

to add a button that calls addItem when we click it.

In addItem, we call this.items.push with a shallow clone of this.newItem that we created with the object spread operator.

Therefore, when we click on add, we see a new entry of items added.

Conclusion

To add a copy of a persistent object to a repeated array with Vue.js, we can use the object spread operator.