Vue.js：メソッドに基づいてリストをソート

Question

生データを取得してアイテムのリストを表示しています。各アイテムには、（計算されたプロパティではない）メソッドを使用して生成する複雑なプロパティがあります。そのプロパティはユーザー入力によって変更される可能性があります。そのプロパティに基づいてリストの項目をソートすることは可能ですか？

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; 
} 

したがって、各項目は、グローバル、動的因子、 "距離" によって操作される時間値を有します。アイデアは、「距離」が変わるたびにアイテムを自動的にソートし、「スピード」プロパティを更新することです。これは可能ですか？

Answer 1

これはいかがですか？

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

テンプレート

<li v-for="item in sortedItems">