Vue.js: сортировка списка по методу

Я получаю некоторые необработанные данные и отображаю список элементов. Каждый элемент имеет сложное свойство, которое я генерирую с помощью метода (который не является вычисляемым свойством). Это свойство может измениться при вводе данных пользователем. Можно ли отсортировать элементы списка на основе этого свойства?

HTML:

<ul>
  <li v-for="item in items">
    <span>{{ calculateComplexProperty(item.time) }}</span>
  </li>
</ul>

JavaScript:

calculateComplexProperty: function (time) {
  // this.distance is an external factor that is not a property of the list item, 
  // and that can be manipulated by the user
  var speed = time * this.distance;

  return speed;
}

Таким образом, каждый элемент имеет значение времени, которым управляет глобальный динамический фактор «расстояние». Идея состоит в том, чтобы автоматически сортировать элементы при изменении «расстояния», а также обновлять свойство «скорость». Это возможно?


javascript vue.js sorting v-for
person sven    schedule 02.05.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Как насчет этого?

computed:{
    sortedItems(){
        return this.items.sort((a,b) => 
             this.calculateComplexProperty(a.time) - this.calculateComplexProperty(b.time))
    }
}

Шаблон

<li v-for="item in sortedItems">
person Bert    schedule 02.05.2017

arrow_upward
-1
arrow_downward

Шаблон

<li v-for="item in sortedItems(items)">

vue js

computed:{
    sortedItems(items){
        return _.orderBy(items, 'time', 'asc');
    }
}
person Rayees Pk    schedule 23.04.2018