A watcher allows you to "watch" a property of the component data, and run a function when that property value changes.
In the watch object add a method with the same name as the property data you want to "watch".

Syntax:
var vm = new Vue({
 el: 'css_selector',
 data: {
 prop_name: 'value'
 }.
 watch: {
 prop_name: function(newVal, oldVal{
 //code and value to return
 }
 }
});

The function assigned to watch.prop_name can optionally accept 2 parameters. The first is the new property value (newVal). The second is the old property value.

Here is a practical example with the watch property in vue.js. Add the diameter of a circle into an input field, then it is displayed the perimeter and area:
<div id='demo'>
 Diameter circle: <input type='number' value='0' v-model='diameter'/><br>
 Perimeter: {{perimeter}}<br>
 Area: {{area}}
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 diameter: 0,
 perimeter:0,
 area:0
 },
 watch: {
 diameter: function(val){
 this.perimeter = 3.14*val;
 this.area = 3.14*(val*val)/4;
 }
 }
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Watch Property

Last accessed pages

  1. SHA1 Encrypt data in JavaScript (17686)
  2. Input text fields (2575)
  3. PHP getElementById and getElementsByTagName (38312)
  4. Create simple Website with PHP (28042)
  5. Get and Modify content of an Iframe (21768)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (150)
  2. Register and show online users and visitors (95)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (88)
  4. Read Excel file data in PHP - PhpExcelReader (88)
  5. JavaScript Course - Free lessons (73)