Array length watcher in Vue.js

in Code Write a comment

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. 
Renat Galyamov

Want to share this with your friends?

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.

I developed a Vue.js starter kit that you can order today

Order Vue.js starter kit

Write a Comment