如何在 vuejs 的基于类的组件中编写计算 setter [英] how to write computed setters in class-based components in vuejs

问题描述

我有以下计算属性的代码.

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

现在，我想在基于类的组件中编写它.我觉得getter应该是这样的，但是setter怎么写?

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
}

推荐答案

基于类的组件使用 get 和 set 来计算属性:

Class based components use get and set for computed properties:

get filterText() {
  return this.filter
}

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

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

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>

这篇关于如何在 vuejs 的基于类的组件中编写计算 setter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！