Как отобразить значок сортировки на основе вычисленного свойства?

Question

Я хочу показать соответствующий значок сортировки на основе вычисленного значения. Например, если был выбран столбец column1, либо classRefcodeDown, либо classRefcodeUp имеет значение true. оба вычисленных свойства вызывают метод sortClassRefcode, значения которого будут оцениваться с помощью filterOptions.sort_by (refcode, column2, column3, и так далее ...) и filterOptions.sort_type ('AS C' или 'DES C'). Но не работает соответственно. Пожалуйста. проверьте мой код ниже 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
  }
}

Когда я запускаю эти вычисленные свойства изменился соответствующим образом, но значок отображается не на основе вычисленных значений

devtools-computed

неожиданный-выходной-значок

Answer 1

Ваши вычисленные свойства не имеют фактических зависимостей. На простейшем уровне зависимости вычисляемого свойства - это любой прямой доступ к значению в свойстве данных или к другому вычисляемому свойству.

Вычисляемое свойство будет повторно оцениваться только после изменения некоторых его реактивных зависимостей.

Оба ваших вычисленных свойства вызывают метод без доступ к любому типу значения, поэтому изменение никогда не будет идентифицировано.

Если вы хотите, чтобы он реагировал на изменения, отметьте 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>