Computed Properties

Computed Setter and Getter

Computed properties are like methods but with some difference in comparison to methods. Computed properties are defined in the computed object, they are usualy used to automatically update some properties or template structures when other template data is changed.

Syntax:

var vm = new Vue({
//...
 computed: {
 prop_name: function(){
 //code and value to return
 }
 }
});

Here is an example, the text added into an input field will change the value of the {{msg}} template. Now, with the definition of a computed property (here reversedMsg), when data for {{msg}} changes the vm.reversedMsg is automatically updated and returns the text in reverse order.

<div id='example'>
 Add some text: <input type='text' v-model='msg'/>
 <p>Messag: {{msg}}</p>
 <p>Computed reversed message: "{{ reversedMsg }}".</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});
</script>

The computed function from reversedMsg is used as the getter function for the property vm.reversedMsg.
Vue is aware that vm.reversedMsg depends on vm.msg, so it will update any bindings that depend on vm.reversedMsg when vm.msg changes, like you can see again in the following example.

var vm = new Vue({
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});

console.log(vm.reversedMsg) // olleH
vm.msg = 'Goodbye';
console.log(vm.reversedMsg) // eybdooG

Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its dependencies have changed.
As long as vm.msg has not changed, multiple access to the vm.reversedMsg computed property will immediately return the previously computed result without having to run the function again.

Computed Setter and Getter

Computed properties are by default getter-only (used to get a value), but you can also provide a setter when you need it. In this case the syntax is:

var vm = new Vue({
//...
 computed: {
 prop_name: {
 get: function(){
 //code for getter
 },
 set: function(){
 //code for setter
 }
 }
 }
});

Here is an example:

<div id='demo'>
 Full Name: <input type = 'text' v-model='fullname' /><br><br>
 First Name: {{first_name}}<br>
 Last Name: {{last_name}}
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 first_name :'Mar',
 last_name : 'Plo'
 },
 computed :{
 fullname : {
 get : function(){
 return this.first_name+' '+this.last_name;
 },
 set : function(name){
 var fname = name.split(' ');
 this.first_name = fname[0];
 this.last_name = fname[1]
 }
 }
 }
});
</script>

When we run the code and edit the text box, the first_name and the last_name will be updated because of the set function.
The get function returns the first_name and last_name, while the set function updates it, if anything is edited.

<<-Conditional Directives v-if, v-else, .. -- Watch Property->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which attribute specifies the URL address where to send the form-data?

method action name

<form action="script.php" method="post"> ... </form>

Which CSS property can be used to break lines in the middle of words?

word-wrap line-height font-size

#id {
  width: 100px;
  word-wrap: break-word;
}

Which function sorts the elements of an array into alphabetical order, based on the string values?

pop() sort() shift()

var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css

Indicate the function that returns the value of the last element into an array.

current() next() end()

$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript

Computed Properties

Vuejs Course

Computed Setter and Getter

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month