28 December, 2020

Vue.js Watch Property

                No comments   

Vue.js Watch Property

The Vue.js Watcher or watch property allows the developers to listen to the component data and run whenever they change a particular property. The watcher or watch property is a unique Vue.js feature that lets you keep an eye on one property of the component state and run a function when that property value changes.

Let's take an example to see and learn about the Watch property in VueJS. See the following examples to understand the concept of watcher or watch property.

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Watch Property</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.     <div id = "wat_pro">  
  9.          Kilometers : <input type = "text" v-model = "kilometers"><br/>  
  10.          Meters : <input type = "text" v-model = "meters">  
  11.       </div>  
  12.       <script src="index.js"></script>  
  13.    </body>  
  14. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#wat_pro',  
  3.             data: {  
  4.                kilometers : 0,  
  5.                meters:0  
  6.             },  
  7.             methods: {  
  8.             },  
  9.             computed :{  
  10.             },  
  11.             watch : {  
  12.                kilometers:function(val) {  
  13.                   this.kilometers = val;  
  14.                   this.meters = val * 1000;  
  15.                },  
  16.                meters : function (val) {  
  17.                   this.kilometers = val/ 1000;  
  18.                   this.meters = val;  
  19.                }  
  20.             }  
  21.          })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

Vue.js Watch Property

You can see that the output has the 0 entry in its textboxes. If you enter some values in the kilometers textbox you can see the changes in the meters textbox and vice-versa. Let's enter 50 in kilometers textbox and see the result.

Output:

Vue.js Watch Property

Now, enter some value in the meter textbox and see the changes in the kilometers textbox. Let's enter 5 in the meter textbox and see the result in the output.

Output:

Vue.js Watch Property

Example Explanation

In the above example, we have created two textboxes, one with kilometers and another with meters. We have initialized both textboxes the kilometers and meters to 0 in the data property. Here, we have created a watch object created with two functions kilometers and meters. In both the functions, the conversion from kilometers to meters and from meters to kilometers is done.

When you enter values inside any of the textboxes, whichever is changed, the Watch property takes care of updating both the textboxes. You do not have to assign any events or wait for it to change and do the extra work of validating. The watch property takes care of updating the textboxes with the calculation done in the respective functions.

Vue.js Computed vs. Watched Property

If you compare Vue.js computed property with Vue.js watch property, then the Vue.js watch property provides a more generic way to observe and react to data changes.

If you have some data that you need to change based on some other data, it is easy and straightforward to use watch property, especially if you are coming from an AngularJS background. But, it is a better idea to use a computed property rather than an imperative watch callback.

Let's take an example and see and compare it with both watch property and computed property.

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Watch Property</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.     <div id="eg_1">{{ fullName }}</div>  
  9.       <script src="index.js"></script>  
  10.    </body>  
  11. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.   el: '#eg_1',  
  3.   data: {  
  4.     firstName: 'Alex',  
  5.     lastName: 'Panda',  
  6.     fullName: 'Alex Panda'  
  7.   },  
  8.   watch: {  
  9.     firstName: function (val) {  
  10.       this.fullName = val + ' ' + this.lastName  
  11.     },  
  12.     lastName: function (val) {  
  13.       thisthis.fullName = this.firstName + ' ' + val  
  14.     }  
  15.   }  
  16. })  

Output:

Vue.js Watch Property

You can see that the above code is imperative and repetitive. Now, let's compare it with a computed property example:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Computed Property</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.     <div id="eg_2">{{ fullName }}</div>  
  9.       <script src="index.js"></script>  
  10.    </body>  
  11. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.   el: '#eg_2',  
  3.   data: {  
  4.     firstName: 'Alex',  
  5.     lastName: 'Panda'  
  6.   },  
  7.   computed: {  
  8.     fullName: function () {  
  9.       return this.firstName + ' ' + this.lastName  
  10.     }  
  11.   }  
  12. })  

Output:

Vue.js Watch Property

You can see that both examples give the same result, but the second one, "computer property" example is much better and concise.

by : javatpoint

Related Posts:

  • Laravel Vue JS Limitless Parchment Model with Demo Here, I need to impart to you how to make limitless parchment pagination utilizing vue js and laravel 5.6. we will make bit by bit vuejs boundle… Read More
  • Vue.js Mixins  Vue.js MixinsIn Vue.js, mixins are a set of defined logic, stored in a predefined way specified by Vue.js. We can use these mixins over a… Read More
  • Vue.js Custom Directives Vue.js Custom DirectivesVue.js directives are used in Vue.js applications to make them reusable and straightforward. Directives are just like i… Read More
  • Vue.js Routing  Vue.js RoutingVue.js does not have a built-in router feature, but you can easily create a single page application that supports routing u… Read More
  • Vue.js Render functions  Vue.js Render functionsVue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-compi… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Vue3 :style backgroundImage not working with require
    I'm trying to migrate a Vue 2 project to Vue 3. In Vue 2 I used v-bind style as follow: In Vue 3 this doesn't work... I tried a...
  • SQL ORDER BY Keyword
      The SQL ORDER BY Keyword The ORDER BY keyword is used to sort the result-set in ascending or descending order. The ORDER BY keyword sorts ...
  • Enabling authentication in swagger
    I created a asp.net core empty project running on .net6. I am coming across an issue when I am trying to enable authentication in swagger. S...
  • failed to load storage framework cache laravel excel
       User the export file and controller function  ..         libxml_use_internal_errors ( true ); ..Good To Go   public function view () : ...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...

Categories

Social Media Links

Blog Archive

Laravel News