如何根据计算属性显示排序图标？答案

【问题标题】：How to show sort icon based on computed property?如何根据计算属性显示排序图标？
【发布时间】：2020-08-19 14:36:57
【问题描述】：

我想根据计算值显示相应的排序图标。例如，如果单击了 column1，则 classRefcodeDown 或 classRefcodeUp 为 true。两个计算属性都调用一个 sortClassRefcode 方法，该方法的值将使用 filterOptions.sort_by（refcode、column2、column3 等...）和 filterOptions.sort_type（'ASC' 或 'DESC'）进行评估。但不能相应地工作。请。在下面检查我的代码 HTML：

<div v-if="classRefcodeDown"> 
      <i class="fas fa-sort-down"></i>
  </div>
  <div v-else-if="classRefcodeUp"> 
      <i class="fas fa-sort-up"></i>
  </div>
  <div v-else> <i class="fas fa-sort"></i> 
</div>

vuejs 计算

computed: {          
    classRefcodeUp: function(){
        return this.sortClassRefcode('refcode', 'ASC')
    },
    classRefcodeDown: function(){
        return this.sortClassRefcode('refcode', 'DESC')
    }
}

vuejs 方法

methods: {
  sortClassRefcode: function(field, type) {
      if(this.filterOptions.sort_by == field && this.filterOptions.sort_type == type){
          return true
      }
      return false
  }
}

当我运行这些计算属性时，计算属性会发生相应的变化，但出现的图标并不反映基于计算值

开发工具计算

意外的输出图标

【问题讨论】：

我认为问题在于你的计算属性没有反应性依赖

标签： vue.js vue-directives

【解决方案1】：

您的计算属性没有实际的依赖关系。在最简单的级别上，计算属性的依赖关系是对数据属性中的值或另一个计算属性的任何直接访问。

A computed property will only re-evaluate when some of its reactive dependencies have changed.

您的两个计算属性都调用方法而不访问任何类型的值，因此永远不会识别更改。

如果您希望它对更改做出反应，请检查计算属性中的this.filterOptions.sortyBy 和this.filterOptions.sort_type。

不过，还有一种更简单的方法来处理这个问题。为什么不只使用单个计算属性来获取图标，并将其用作类描述？

computed: {
    refCodeClass() {
        if (this.filterOptions.sort_by === 'refcode') {
            return this.filterOptions.sort_type === 'ASC' 
                ? 'fa-sort-up' 
                : 'fa-sort-down';
        }
        return 'fas-sort''
    }
}

<i class="fas" :class="refCodeClass"></i>

【讨论】：