Vue.js : 메서드를 기반으로 목록 정렬

Question

일부 원시 데이터를 가져 와서 항목 목록을 표시하고 있습니다. 각 항목에는 메서드 (계산 된 속성이 아님)를 사용하여 생성하는 복잡한 속성이 있습니다. 이 속성은 사용자 입력에 따라 변경 될 수 있습니다. 해당 속성을 기반으로 목록의 항목을 정렬 할 수 있습니까?

HTML :

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

자바 스크립트 :

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">