Scribd
Upload
58 views1 page

Vue - Js Watch Property: Help Others, Please Share

The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

Uploaded by

Arjun Gautam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views1 page

Vue - Js Watch Property: Help Others, Please Share

The document discusses the Vue.js watch property, which allows developers to listen for changes to component data and run functions in response. It provides an example using a watch property to sync textbox values for kilometers and meters. Computed properties are introduced as an alternative that is less repetitive for cases where data needs to change based on other data.

Uploaded by

Arjun Gautam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

You might also like