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