How to update an array with Vue.js and Vue.set()?

Sometimes, we want to update an array with Vue.js and Vue.set()

In this article, we’ll look at how to update an array with Vue.js and Vue.set().

How to update an array with Vue.js and Vue.set()?

To update an array with Vue.js and Vue.set(), we call Vue.set or this.$set with the array we want to update, the index of the array item we want to update, and the item we replace the existing item at the index with.

For instance, we write

new Vue({
  el: "#app",
  data: {
    items: ["10-03-2017", "12-03-2017"],
  },
  methods: {
    update() {
      this.$set(items, 1, "12-03-2022");
    },
  },
});

to call this.$set with the items array, index 1, and "12-03-2022" to update the 2nd items entry to "12-03-2022".

This change will be picked up by Vue, so re-rendering will happen.

We use Vue.set the same as this.$set.

How to update an array with Vue.js and Vue.set()?

Conclusion