Skip to content
Related Articles

Related Articles

Vue.js Watchers
  • Last Updated : 15 Oct, 2020
GeeksforGeeks - Summer Carnival Banner

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=
        "https://unpkg.com/vue">
    </script>
</head>
  
<body>
    <h1 style="text-align: center; 
             color: rgb(27, 114, 53);">
        GeeksforGeeks
    </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=
        "https://unpkg.com/vue">
    </script>
</head>
  
<body>
    <h1 style="text-align: center;
             color: rgb(27, 114, 53);">
        GeeksforGeeks
    </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.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :