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:

  • Vue.js Transition and Animation Vue.js Transition and AnimationVue.js provides several ways to apply transition and animation effects to the applications when you insert, updat… Read More
  • Vue.js Data BindingVue.js Data BindingVue.js supports different types of data binding. Before going to learn data binding in Vue.js, let's see what data binding is and h… Read More
  • Vue.js Watch PropertyVue.js Watch PropertyThe Vue.js Watcher or watch property allows the developers to listen to the component data and run whenever they change a particu… Read More
  • Vue.js Form Input BindingsVue.js Form Input BindingsVue.js provides a v-model directive that can be used to create two-way data bindings on form inputs, text, textare… Read More
  • Vue.js Event HandlingVue.js Events In Vue.js, Events are used to respond to an action. Suppose, you have to build a dynamic website using Vue.js then you'll most like… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Show page numbers as navigation in Laravel pagination
      Answer Sorted by:                                                Highest score (default)                                                  ...
  • Bootstrap - Code
    Bootstrap - Code Bootstrap allows you to display code with two different key ways − The first is the <code> tag. If you are going to ...
  • Reasons to use WordPress
      Reasons to use WordPress There are many reasons to use WordPress in today's scenario as it provides a great help to its users in all r...
  • Inertia and React or Vue
    Hi just checking your thoughts on whether to learn React or Vue, I want to learn React as it may be better to find work and it has a larger ...
  • Laravel Passwordless Login
      Laravel Passwordless login is a package by   Ed Grosvenor   that provides a simple, safe, magic login link generator for Laravel apps: Thi...

Categories

Social Media Links

Blog Archive