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.

Hi, I'm Renat 👋


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.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment