Vue.js is a very powerful and reactive Javascript framework, which is used to build Uis (User Interfaces) and SPAs (Single-page Applications). It is built by combining the best features from already existing Angular and react Frameworks. Developers also love to code or build applications in it.
Vue.js provides the watch property to observe and react to the variables or data change. We can use the watch property to manipulate the DOM when the watched variable gets changed. In this article, we are going to have a look at how we can use watch property, and perform the desired tasks on the change of variable. So, let’s get started.
Watchers
A watcher in Vue.js acts like an event listener to a variable or property. It is used to accomplish several tasks on the change of some specific property. It comes in handy while doing asynchronous tasks.
Let’s demonstrate and understand the concept of the watcher by considering an example.
Example:
Suppose we are building an e-commerce website, in which we have a list of items, and we are building it cart or checkout component. In that component, we need to calculate the amount of a single element concerning the number of items.
First, we are assuming some properties in the data.
return {
itemName: "Item 1",
itemQuantity: null,
itemPrice: 200,
totalPrice: 0
}
},
In which we will watch the “itemQuantity” property and calculate the total price. We will first do the data bindings in the template,
before writing the code for watching the variable and calculating the total price.
<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>
After writing this code, we will have our web page like this:
Now, we want to change the total price on the change of “itemQuantity” like whenever the user changes the quantity using the input field. The Total Price should get changed. For that purpose, we will have to watch the “itemQuantity” and calculate the total price whenever the “itemQuantity” property gets changed.
So, the watcher for the “itemQuantity” would be like this:
itemQuantity(){
this.totalPrice = this.itemQuantity * this.itemPrice;
console.log(this.itemQuantity);
}
}
Now, whenever the user changes the “itemQuantity”, the total price will be changed in a moment. We don’t have to worry about anything, anymore. The watch property will take care of this calculation now.
Let’s have a look at the web page:
And, let’s try to increase or change the quantity and see some results:
If we change the quantity, let’s say “4”, the total price would be “800”:
Similarly, if we change the quantity to “7”, the total price would be “1400”:
So, this is how the watch property works and helps in reactive development. Reactivity is kind of a signature of Vue.js. Also, the watch property comes in handy while performing asynchronous operations.
Conclusion
In this article, we have learned what is a watch property and how we can use it in Vue.js. We have also tried a real-life example to understand its true implementation. This helps a lot in saving time and speeding up the development process. We hope that you found this article helpful and keep on visiting linuxhint.com for better understanding.
