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