Deep Watching Concepts

When using Vue.js to watch a data property, you can purposefully observe keys inside an object for changes, rather than changes to the object itself. This is done by setting the optional deep property to true:

data() {
  return {
      organization: {
        name: 'ABC',
        employees: [
            'Jack', 'Jill'
        ]
      }
  }
},
watch: {
    organization: {
      handler: function(v) {
        this.sendIntercomData()
      },
      deep: true,
      immediate: true,
    },
  },

This example will watch all available keys inside the organization data object for changes, so if the name property inside the organization changes, the organization watcher will trigger.

If you do not need to observe every key inside of an object, it can be more performant to just watch a specific key inside an object for changes by specifying it as a myObj.value string. For example, you may allow a user to edit their company name and have that data sent to an API only when that key has been modified.

In the following example, the watcher is specifically observing the name key of the organization object.

data() {
  return {
      organization: {
        name: 'ABC',
        employees: [
            'Jack', 'Jill'
        ]
      }
  }
},
watch: {
    'organization.name': {
      handler: function(v) {
        this.sendIntercomData()
      },
      immediate: true,
    },
  },

We saw how deep watching works. Now, let's try the next exercise and watch the nested properties of a data object.

Exercise 2.04: Watching Nested Properties of a Data Object

In this exercise, you will use watchers to observe keys within an object, which will update when a user triggers a method within the UI.

To access the code files for this exercise, refer to https://packt.live/353m59N.

1. Open a command-line terminal, navigate to the Exercise 2.04 folder, and run the following commands in order:

   > cd Exercise2.04/
   > code .
   > yarn
   > yarn serve

   Go to https://localhost:8080.

2. Start by defining a product object that contains a price and label and a discount key. Output these values into the template:

   <template>
     <div class="container">
       <h1>Deep Watcher</h1>
       <div>
           <h4>{{ product.label }}</h4>
           <h5>${{ product.price }} (${{ discount }} Off)</h5>
       </div>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         discount: 0,
         product: {
           price: 25,
           label: 'Blue juice',
         },
       }
     },
   }
   </script>
   <style lang="scss" scoped>
   .container {
     margin: 0 auto;
     padding: 30px;
     max-width: 600px;
     font-family: 'Avenir', Helvetica, sans-serif;
     margin: 0;
   }
   a {
     display: inline-block;
     background: rgb(235, 50, 50);
     border-radius: 10px;
     font-size: 14px;
     color: white;
     padding: 10px 20px;
     text-decoration: none;
   }
   </style>

3. Set up a button that will modify the price of the product. Do this by adding a button element with a click event bound to an updatePrice method that decrements the value of price:

   <template>
   ...
       <a href="#" @click="updatePrice">Reduce Price!</a>
   ...
   </template>
   <script>
   ...
     methods: {
       updatePrice() {
         if (this.product.price < 1) return
         this.product.price--
       },
     },
   ...
   </script>

   When you click the button, it should reduce the price as seen in the following screenshot:

   

   Figure 2.6: Screen displaying the reduced price of Blue juice

4. Time for the nested watcher. We will watch the product object's price, and increment the discount data prop:

     watch: {
       'product.price'() {
         this.discount++
       },
     },

   Now, as you reduce the price, the discount value will go up because of the watcher:

   

Figure 2.7 Output displaying an increased discount value

In this exercise, we used watchers to observe a key inside an object and then set new data with or without using the optional arguments parsed by the watcher.