Vue.js Computed Properties Computed Setters
Example
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.
