如何在Vue.js中的基于类的组件中编写计算的设置器

时间:2018-12-21 07:21:59

标签: vue.js vuejs2

我有下面的代码用于计算属性。

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

现在,我想在基于类的组件中编写它。我认为getter应该是这样,但是如何写setter

get filterText() {
  return this.filter
}

1 个答案:

答案 0 :(得分:5)

基于类的组件将getset用于计算属性:

get filterText() {
  return this.filter
}

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

用TypeScript编写的单个文件组件的结构如下:

<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>