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

是的，這是要做到這一點的方法。你可以使用類似lodash的東西：

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