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

VUEjs模板计算数组顺序

1 个答案: