In this article,let us understand the watch property of vuejs with very simple example. The Vuejs Watch property is used for modifying the data on change of the property.
This watcher concept can be explained clearly by the following example. Scenario: Suppose we want to square a number and display the result in another textbox.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvWatchproperty>
<input type=text v-model=squareit><br>
<input type=text v-model=number><br>
<div>
<script type=text/javascript>
var vm=new vue({
el:'#dvWatchproperty',
data: {
number:0
},
methods:{
},
computed:{
},
watch:{
squareit:function(val)
{
this.number= val ^ 2;
}
}
});
<script>
<body>
<html>
In the above example, we have created one textbox to enter the number and another textbox is to display the square of the number.Whenever you enter number it calls squareit watcher and it simple square the number.Since in the next textbox you have called the number,it automatically displays the latest changes of that number and displays the square of the number.