Hello folks! welcome back to a new edition of our Vue.js tutorial. In this tutorial, we will be studying about Vue.js Watch Property.
With the help of an example, we'll see how we can use Watch property in Vue.js.
With the help of an example, we'll see how we can use Watch property in Vue.js.
Example
Following is a simple example -
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> Kilometers : <input type = "text" v-model = "kilometers"> Meters : <input type = "text" v-model = "meters"> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); </script> </body> </html>
In the following code above, we created two textboxes, one with kilometers and another with meters. In data property, the kilometers and meters are initialized to zero(0). There's a watch object created using two functions kilometers and meters. In both function, the conversation from kilometers to meters and from meters to kilometers is done.
As we input values into any of the textboxes, whichever is changed, Watch property takes care of updating both textboxes. We do not have to specially assign any events and wait for it to change and carry out the extra work of validation. Watch takes care of updating the textboxes with the calculation executed in the respective functions.
As we input values into any of the textboxes, whichever is changed, Watch property takes care of updating both textboxes. We do not have to specially assign any events and wait for it to change and carry out the extra work of validation. Watch takes care of updating the textboxes with the calculation executed in the respective functions.
Output
Let us take a look at the output in the web browser -
Let us input some values in the kilometers textbox and see it changing in the meters textbox and vice-versa.
Let's now enter in meters textbox and see it changing in the kilometers textbox. This is the display screen in the browser.
READ: Vue.js | Components
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Binding.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
