如何在Vue2的computed属性中正确使用vue2-filters的方法？

我来帮你搞定这个问题～首先得理清两个核心点：模板里的| pluralize是Vue专属的模板语法糖，不能直接在computed属性里用管道符；另外你直接调用this.pluralize找不到方法，是因为vue2-filters的mixin是把过滤器注册到组件的filters选项中，而非直接挂载到组件实例（this）上的。

针对你的场景，这里有两种实用的解决方案：

方案一：通过组件实例的$options.filters访问过滤器函数 #

既然你已经混入了Vue2Filters.mixin，组件的filters选项里已经包含了pluralize方法，你可以通过this.$options.filters来调用它，把原来的管道写法改成函数调用形式：

export default {
  name: 'CategoryDetails',
  mixins: [appMixin, Vue2Filters.mixin],
  // ...其他组件选项
  computed: {
    getRelatedTasksHeaderTitle: function () {
      const taskCount = this.relatedTasks.length
      // 用函数调用替代模板管道语法
      const pluralizedTask = this.$options.filters.pluralize(taskCount, ['task', 'tasks'])
      return `Has ${taskCount} ${pluralizedTask}`
    }
  }
}

方案二：直接导入pluralize函数使用 #

如果你不想依赖组件实例的过滤器，可以直接从vue2-filters中导入具体的函数，这样在computed里调用会更直观，甚至可以不用混入Vue2Filters.mixin：

import Vue from 'vue'
import Vue2Filters, { pluralize } from 'vue2-filters' // 单独导入pluralize函数
Vue.use(Vue2Filters)

// ...

export default {
  name: 'CategoryDetails',
  mixins: [appMixin],
  // ...其他组件选项
  computed: {
    getRelatedTasksHeaderTitle: function () {
      const taskCount = this.relatedTasks.length
      const pluralizedTask = pluralize(taskCount, ['task', 'tasks'])
      return `Has ${taskCount} ${pluralizedTask}`
    }
  }
}

这两种方案都能解决你遇到的this.pluralize is not a function错误，根据你的偏好选择就行～

内容的提问来源于stack exchange，提问作者mstdmstd