Array length watcher in Vue.js

In this tutorial, you’ll learn how to use a custom watcher to view array length in Vue.js. For instance, you can display a message if the user adds or removes items from an array.

new Vue({
  el: "#app",
  data: {
    items: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Build something awesome", done: true }
    ]
  },
  computed: {
    itemsLength() {
      return this.items.length
    }
  },
  watch: {
    itemsLength (val, oldVal) {
      console.log('length changed')
    }
  }
})

We’ve created a computed property itemsLength() and watch this property in itemsLength() watcher.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-array-length-watcher

PS: Make sure you check other Vue.js tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019) or Vue.js custom watchers.