VUEjs 템플릿 계산 된 배열 순서

Question

VUE 템플릿이 있고 API에서 배열을 가져옵니다. 국가 목록이라고합시다.

지금 .... 나는이 배열 순서를 변경해야하는 수신의 ID에 따라

그것은 다음과 같을 수 있습니다 :

내 템플릿은 다음과 같습니다

Vue.component('select-list', { 
template: '#select_list', 
props: ['id', 'label', 'selected', 'list'], 
computed: { 
    // a computed getter 
    computedList: function() { 

     // I think I need to reorder the array (list) in here? 

    } 
}}); 

:

<template id="select_list"> 
<div class="nfw-row"> 
    <label :for="id">{{ label }}</label> 
    <div> 
     <select :name="id" :id="id" v-model="selected"> 
      <option value="">Please select...</option> 
      <option :value="list_item" v-for="list_item in computedList">{{ list_item.name }}</option> 
     </select> 
    </div> 
</div> 
</template> 

내 목록을 주문해야하는 경우 올바른 길을 가고 있습니까? 항목 5, 7, 6 및 10이 배열의 맨 위에 정렬되어 있다고 가정 해 봅시다.

Answer 1

네, 이렇게하는 방법입니다. 당신은 로다시 같은 것을 사용할 수 있습니다 :

computed: { 
    computedList: function() {  
     return _.sortBy(this.list, [function(o) { return o.id; }]); 
    } 
}});