如何将两个计算属性合并为一个

【问题标题】：How to merge two computed properties into one如何将两个计算属性合并为一个
【发布时间】：2022-01-11 10:08:34
【问题描述】：

很抱歉这个菜鸟问题，但我如何在不重复代码的情况下组合这两个计算属性？非常感谢

computed: {
        getStatusColor() {
            const { end_of_availability } = this.fullData
            if (end_of_availability === 'unlimited') {
                return 'w-green'
            } else {
                if (moment.utc().diff(end_of_availability + 'T23:59:59Z') < 0) return 'w-green'
                else return 'w-red'
            }
        },
        capitalizedAvailability() {
            const { end_of_availability } = this.fullData
            if (end_of_availability === 'unlimited') {
                return 'Active'
            } else {
                if(moment.utc().diff(end_of_availability + 'T23:59:59Z') < 0) return 'Active'
                else return 'Inactive'
            }
        }
    }

【问题讨论】：

标签： vue.js

【解决方案1】：

您似乎感兴趣的是知道您的 thing 是否处于活动状态，因此创建一个计算属性来计算您的 thing 是否处于活动状态，并返回任何内容您需要基于此返回。

computed: {
  isActive() {
    const { end_of_availability } = this.fullData;
    return (
      end_of_availability === 'unlimited' ||
      moment.utc().diff(end_of_availability + 'T23:59:59Z') < 0
    );
  },

  statusColor() {
    return this.isActive ? 'w-green' : 'w-red';
  },
  capitalizedAvailability() {
    return this.isActive ? 'Active' : 'Inactive';
  }
}

另外，将计算属性命名为属性，而不是方法。 getStatusColor 不是事物的属性。对应的属性是statusColor。

【讨论】：