Home Java Vue.
js JavaScript HTML CSS
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:
<html>
<head>
<title>Vue.js Watch Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vu
</script>
</head>
<body>
<div id = "wat_pro">
Kilometers : <input type = "text" v-
modelMeters
= "kilometers"><br/>
: <input type = "text" v-
model = "meters">
</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#wat_pro',
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;
})
Let's use a simple CSS file to make the output more
attractive.
Index.css file:
html, body {
margin: 5px;
padding: 0;
After the execution of the program, you will see the
following output:
Output:
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:
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:
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:
<html>
<head>
<title>Vue.js Watch Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vu
</script>
</head>
<body>
<div id="eg_1">{{ fullName }}</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#eg_1',
data: {
firstName: 'Alex',
lastName: 'Panda',
fullName: 'Alex Panda'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
thisthis.fullName = this.firstName + ' ' + val
})
Output:
You can see that the above code is imperative and
repetitive. Now, let's compare it with a computed
property example:
Index.html file:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vu
</script>
</head>
<body>
<div id="eg_2">{{ fullName }}</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#eg_2',
data: {
firstName: 'Alex',
lastName: 'Panda'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
})
Output:
You can see that both examples give the same result,
but the second one, "computer property" example is
much better and concise.
← prev next →
For Videos Join Our Youtube
Channel: Join Now
Help Others, Please Share
Learn Latest Tutorials
Solr MongoDB
Gimp Verilog
Teradata PhoneGap
Gmail Vue.js
PLC Illustrator
Postman
Preparation
Aptitude Reasoning
Verbal A. Interview
Company
Trending Technologies
AI AWS
Selenium Cloud
Hadoop ReactJS
D. Science Angular 7
Blockchain Git
ML DevOps
B.Tech / MCA
DBMS DS
DAA OS
C. Network Compiler D.
COA D. Math.
E. Hacking C. Graphics
Software E. Web Tech.
Cyber Sec. Automata
C C++
Java .Net
Python Programs
Control S. Data Mining
