VueJs Computed Properties

Remarks

Data vs Computed Properties

The main use-case difference for the data and computed properties of a Vue instance is dependent on the potential state or
robability of changing of the data. When deciding what category a certain object should be, these questions might help:

• Is this a constant value? (data)
• Does this have the possibility to change? (computed or data)
• Is the value of it reliant on the value of other data? (computed)
• Does it need additional data or calculations to be complete before being used? (computed)
• Will the value only change under certain circumstances? (data)

Examples

Basic Example

Template

<div id="example">
 a={{ a }}, b={{ b }}
</div>

JavaScript

var vm = new Vue({
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 // a computed getter
 b: function () {
 // `this` points to the vm instance
 return this.a + 1
 }
 }
})

Result

a=1, b=2

Here we have declared a computed property b. The function we provided will be used as the getterfunction for the property vm.b:

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

The value of vm.b is always dependent on the value of vm.a.

You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.b depends on vm.a, so it will update any bindings that depends on vm.b when vm.a changes.

Computed properties vs watch

template

<div id="demo">{{fullName}}</div>

watch example

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

Computed example

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
 return this.firstName + ' ' + this.lastName
 }
 }
})

Computed Setters

Computed properties will automatically be recomputed whenever any data on which the computation depends changes. However, if you need to manually change a computed property, Vue allows you to create a setter method to do this:

Template (from the basic example above):

<div id="example">
 a={{ a }}, b={{ b }}
</div>

Javascript:

var vm = new Vue({
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 b: {
 // getter
 get: function () {
 return this.a + 1
 },
 // setter
 set: function (newValue) {
 this.a = newValue - 1
 }
 }
 }

You can now invoke either the getter or the setter:

console.log(vm.b) // -> 2
vm.b = 4 // (setter)
console.log(vm.b) // -> 4
console.log(vm.a) // -> 3

vm.b = 4 will invoke the setter, and set this.a to 3; by extension, vm.b will evaluate to 4.

Using computed setters for v-model

You might need a v-model on a computed property. Normally, the v-model won't update the computed property value.

The template:

<div id="demo">
 <div class='inline-block card'>
 <div :class='{onlineMarker: true, online: status, offline: !status}'></div>
 <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
 </div>
 <div class='margin-5'<input type='checkbox' v-model='status'>Toggle status (This will show you as offline to
others)
 </div>
</div>

Styling:

#demo {
 font-family: Helvetica;
 font-size: 12px;
}
.inline-block > * {
 display: inline-block;
}
.card {
 background: #ddd;
 padding:2px 10px;
 border-radius: 3px;
}
.onlineMarker {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 transition: all 0.5s ease-out;
}
.online {
 background-color: #3C3;
}
.offline {
 background-color: #aaa;
}
.user-state {
 text-transform: uppercase;
 letter-spacing: 1px;
}
.margin-5 {
 margin: 5px;
}

The component:

var demo = new Vue({
 el: '#demo',
 data: {
 statusProxy: null
 },
 computed: {
 status: {
 get () {
 return (this.statusProxy === null) ? true : this.statusProxy
 }
 }
 }
})
var demo = new Vue({
 el: '#demo',
 data: {
 statusProxy: null
 },
 computed: {
 status: {
 get () {
 return (this.statusProxy === null) ? true : this.statusProxy
 },
 set (val) {
 this.statusProxy = val
 }
 }
 }
})