by @CodingExample

How to Properly watch nested data in Vue.js

Home » vue » How to Properly watch nested data in Vue.js

This examples shows you how to watch nested data structures in Vue.js

<template>
  <div id="app">
    <input v-model="items.a">
    <p>{{items.a}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: {
        a: 1,
        b: 2,
        c: 3
      }
    };
  },
  watch: {
    'items.a': function(newval, oldVal) {      console.log("new: %s, old: %s", newval, oldVal);
    }
  }
};
</script>

Now, if we type something new in input element, vue watches the items.a property and runs the function.

The watcher function shows us new value and old value(previous value) passed to that property.