Watch Properties in VueJS

Introduction

In this article, we will discuss the watch Properties in VueJs. Watch properties are provided to us by VueJs for observing and reacting towards the variables or the data change. We can get the watch properties in use to manipulate the DOM when the watched variables get changed. This article will look at how we can use the watch properties and reach our desired tasks completed on the change of variable. Let's get started!

Source

Watchers

A watcher can be defined as a component that acts as an event listener towards our variables or properties. It is used to complete several tasks on changing a single specific property. It comes into the picture while we perform asynchronous tasks.

Let’s understand this concept of watchers by the example given below.

data() { return {    itemName: "Item 1",    itemQuantity: null,    itemPrice: 200,    totalPrice: 0  } }, You can also try this code with Online Javascript Compiler Run Code

Here we will watch the “itemQuantity” and we calculate the total price then. We will first bind the data in the template,

<template>  <h1>Watcher</h1>  <p>Item Name: {{ itemName }}</p>  <p>Item Price: {{ itemPrice }}</p>  <input type="number" v-model="itemQuantity" placeholder="quantity" />  <p>Total Price: {{ totalPrice }}</p> </template> You can also try this code with Online Javascript Compiler Run Code

Output

Now we wish to change the total price concerning the changes in the "itemQuantity", this means that as soon as the quantity changes the total price should change as well. For this task to be fulfilled, we have to watch the "itemQuantity" and calculate the final price when the "itemQuantity" is changed.

So when we implement the watcher for the same it would look something like this:

watch:{  itemQuantity(){    this.totalPrice = this.itemQuantity * this.itemPrice;    console.log(this.itemQuantity);  } } You can also try this code with Online Javascript Compiler Run Code

Using this watcher, whenever we change the "itemQuantity", this will also change the final prince in a moment.

Now, whenever the user modifies the "itemQuantity", this will change the total price at the moment itself. We don't have to worry about anything anymore. The watch property takes care of this calculation now.

So now, this is how our watch property works, and it helps us in reactive development. Reactivity is spotted as the signature of vue.js.