Watch Property

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>

<<-Computed Properties -- Creating Lists with v-for->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which HTML5 tag defines marked text? (can be used to highlight parts of text)

<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>

Which CSS pseudo-class adds a style to an element when the mouse is over it?

:focus :hover :active

a:hover {
  font-weight: bold;
  color: #00da01;
}

Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.

toPrecision(x) toFixed(x) floor(x)

var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35

Indicate the PHP function which reads an entire file into an array.

[) file() readfile()

$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);

Last accessed pages

Image in PHP with background in two colors ⁽¹²¹¹⁾
PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files ^(26056)
Execute JavaScript scripts loaded via AJAX ⁽⁷⁸⁵⁷⁾
innerHTML in PHP ^(16957)
Adding sounds to buttons ⁽²⁶²¹⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽¹⁸³⁾
Read Excel file data in PHP - PhpExcelReader ⁽⁶¹⁾
The Mastery of Love ⁽⁵⁴⁾
PHP Unzipper - Extract Zip, Rar Archives ⁽⁴⁹⁾
PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files ⁽³²⁾