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".

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}}

var vm = new Vue({
 data: {
 diameter: 0,
 watch: {
 diameter: function(val){
 this.perimeter = 3.14*val;
 this.area = 3.14*(val*val)/4;

Daily Test with Code Example

Which tag is used in <table> to create table header cell?
<thead> <th> <td>
  <th>Title 1</th>
  <th>Title 2</th>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
Watch Property

Last accessed pages

  1. Wake Up! (4468)
  2. CSS Course - Free lessons (10114)
  3. AJAX Course, free Lessons (8699)
  4. Image object (842)
  5. iframe object (1683)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2143)
  2. Contact page - CoursesWeb (2077)
  3. Tabs effect with CSS (2077)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (680)
  5. Insert, Select and Update NULL value in MySQL (540)