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.