[Vuejs]-Setup Getters and Setters

by

0👍

You need to implement a setter for each computed property that you want to mutate, because in Vuejs, computed properties are getter-only by default:

VueJS docs:

Computed properties are by default getter-only, but you can also provide a setter when you need it

A computed property written like that would be like this (again, from the VueJS docs):

fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }

That said, my advice would be to do this another way if want to make your mutations reusable throughout your codebase, which to implement the mutations as store actions/mutations and trigger them from your component methods (or using mapActions…etc).

Leave a comment