how to write computed setters in class-based components in vuejs

Question

I have below code for a computed property.

computed: {
  filterText: {
    get() {
      return this.filter; // it's a vuex state
    },
    set(value) {
      this.setFilter(value); // it's a vuex action
    }
  }
}

Now, I want to write it in class-based components. I think getter should be like this, but how to write setter?

get filterText() {
  return this.filter
}

Brian Lee · Accepted Answer · 2018-12-21 08:40:05Z

33

Class based components use get and set for computed properties:

get filterText() {
  return this.filter
}

set filterText(value) {
  this.filter = value
}

A single file component written in TypeScript would be structured like:

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  @Component
  export default class MyClass extends Vue {
    private filter: string = ''

    public get filterText(): string {
      return this.filter
    }

    public set filterText(filter: string) {
      this.filter = filter
    }
  }
</script>

edited Dec 21, 2018 at 8:40

answered Dec 21, 2018 at 8:34

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

farahm Over a year ago

How do I call the set method?

ness-EE Over a year ago

@farahm this.filterText = value

nymvno Over a year ago

@farahm Actually, it should already work with <component v-model="filterText"/>

Collectives™ on Stack Overflow

how to write computed setters in class-based components in vuejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related