Vue.js 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.