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:

  • VueJS MixinsMixins are basically to be used with components. They share reusable code among components. When a component uses mixin, all options of mixin become a… Read More
  • VueJS RoutingVueJS does not have a built-in router feauture. We need to follow some additional steps to install it.Direct Download from CDNThe latest version of vu… Read More
  • VueJS - Reactive InterfaceVueJS provides options to add reactivity to properties, which are added dynamically. Consider that we have already created vue instance and need to ad… Read More
  • VueJS Directives Directives are instruction for VueJS to do things in a certain way. We have already seen directives such as v-if, v-show, v-else, v-for, v-bind … Read More
  • VueJS Render Function We have seen components and the usage of it. For example, we have a content that needs to be reused across the project. We can convert the same … Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...

Categories

Social Media Links

Blog Archive