A Watcher in Vue.js is a special feature that allows one to watch a component and perform specified actions when the value of the component changes. It is a more generic way to observe and react to data changes in the Vue instance. Watchers are the most useful when used to perform asynchronous operations.
Note: Watchers can change only one property at a time. If multiple component values have to be changed, one can use computed properties.
Syntax:
watch: {
// We can add our functions here
}
Vue.js Watchers can be demonstrated using the following example:
Example: We will first create a simple Vue.js app without using any Watcher. The functionality of this program is to change the value (multiply the input value by 2) of the component on a button click.
HTML
<!DOCTYPE html> <html> <head> <title>Vue.js Watchers</title> <script src= </script> </head> <body> <h1 style="text-align: center; color: rgb(27, 114, 53);"> neveropen </h1> <h3 style="text-align: center"> Vue.js | Watchers </h3> <!-- Creating element for Vue --> <div style="text-align: center;" id="ex"> <h3>Enter any Value : <input type="text" v-model="value1"> </h3> <h3>Input number x 2 : <span style="font-size: 30px;"> {{result}} </span> </h3> <!-- Creating a Button --> <button @click="multiply"> Click Me </button> </div> <script> // Creating instance new Vue({ el: '#ex', data: { // Setting values for fields value1: '', result: 0 }, methods: { // Creating function // for button click multiply: function () { this.result = this.value1 * 2; } } }); </script> </body> </html> |
Output:
The result value changes on button click
In the above example, the value of result value changes only on button click. We will now use watch to notice changes in the input component and update the result value automatically. We will define watch and write the needed functions within it as shown below:
Javascript
watch: { // Creating function // for input component value1: function(val) { this.value1 = val; this.result = 2 * val; }, // Creating function // for result component result: function(val) { this.result = val; } } |
The Watcher now looks for changes in the input value. Whenever the input value changes, the function inside is automatically executed (that multiplies input value by 2), and the value of result changes automatically. We do not have to specially assign any events and wait for the value to change. We will add the above changes to the previous code and remove the button with its functionality.
Example using a Watcher:
HTML
<html> <head> <title>Vue.js Watchers</title> <script src= </script> </head> <body> <h1 style="text-align: center; color: rgb(27, 114, 53);"> neveropen </h1> <h3 style="text-align: center"> Vue.js | Watchers </h3> <!-- Creating element for Vue --> <div style="text-align: center;" id="ex"> <h3>Enter any Value : <input type="text" v-model="value1"> </h3> <h3>Input number x 2 : <span style="font-size: 30px;"> {{result}} </span> </h3> </div> <script> // Creating instance new Vue({ el: '#ex', data: { // Setting values for fields value1: '', result: 0 }, // Creating a Watcher watch: { // Creating function for // input component value1: function (val) { this.value1 = val; this.result = 2 * val; }, // Creating function for // result component result: function (val) { this.result = val; } } }); </script> </body> </html> |
Output:
The result value changes automatically when the input value changes.
