如何在vue js中呈现与数组对象顺序不同的列表

Question

我通过以下方式从服务器获取数据：

"cells": [
{
"consultingBudgetHeadName": "Available hours",
"value": 1806,
"valueMap": "1 806"
},
{
"consultingBudgetHeadName": "Available customer hours",
"value": 1773.2,
"valueMap": "1 773,20"
},
{
"consultingBudgetHeadName": "Absence hours",
"value": 32.8,
"valueMap": "32,80"
},
{
"consultingBudgetHeadName": "Available hours project",
"value": -7092.8,
"valueMap": "-7 092,80"
},
{
"consultingBudgetHeadName": "Average price",
"value": 0,
"valueMap": "0"
},
{
"consultingBudgetHeadName": "Agreement hours",
"value": 8866,
"valueMap": "8 866"
},
{
"consultingBudgetHeadName": "Utilization agreements %",
"value": 500,
"valueMap": "500"
}
]

现在，如果我以这种方式呈现列表：

<template v-for="(cell, index) in cells">
<li>
{{ cell.consultingBudgetHeadName }}
</li>
</template>

它将以这种方式显示输出：

• 可用小时数
• 客户可用小时数
• 缺勤时间
• 可用小时数项目
• 平均价格
• 协议时间
• 使用协议%

但我需要的顺序与数组的顺序不同。我希望我的订单是这样的：

• 可用小时数
• 缺勤时间
• 客户可用小时数
• 协议时间
• 可用小时数项目
• 平均价格
• 使用协议%

所以，我没有进行动态渲染，而是采用数组元素的索引，并以这种方式渲染元素：

<ul v-for="(row, rowIndex) in data.rows">
<li>{{ row.cells[0].consultingBudgetHeadName }}</li>
<li>{{ row.cells[2].consultingBudgetHeadName }}</li>
<li>{{ row.cells[1].consultingBudgetHeadName }}</li>
<li>{{ row.cells[5].consultingBudgetHeadName }}</li>
<li>{{ row.cells[3].consultingBudgetHeadName }}</li>
<li>{{ row.cells[4].consultingBudgetHeadName }}</li>
<li>{{ row.cells[6].consultingBudgetHeadName }}</li>
</ul>

但我认为这不是一个好主意，因为索引号可以随时在数据库中更改。那么，实现这些目标的好方法是什么呢？

CodeSandbox演示

Answer 1

您可以映射您的数组并返回按计算属性排序的数组：

const mappedCells = new Map([["Available hours", 1], ["Available customer hours", 3], ["Absence hours", 2], ["Available hours project", 5], ["Average price", 6], ["Agreement hours", 4], ["Utilization agreements %", 7]])
new Vue({
el: "#demo",
data() {
return {
"cells": [{"consultingBudgetHeadName": "Available hours", "value": 1806, "valueMap": "1 806"}, {"consultingBudgetHeadName": "Available customer hours", "value": 1773.2, "valueMap": "1 773,20"}, {"consultingBudgetHeadName": "Absence hours", "value": 32.8, "valueMap": "32,80"}, {"consultingBudgetHeadName": "Available hours project", "value": -7092.8, "valueMap": "-7 092,80"},  {"consultingBudgetHeadName": "Average price", "value": 0, "valueMap": "0"}, {"consultingBudgetHeadName": "Agreement hours", "value": 8866, "valueMap": "8 866"}, {"consultingBudgetHeadName": "Utilization agreements %", "value": 500, "valueMap": "500"}]
}
},
computed: {
sortedCells() {
return this.cells.map(c => {
c.nr = mappedCells.get(c.consultingBudgetHeadName)
return c
}).sort((a, b) => (a.nr > b.nr) ? 1 : -1)
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<li v-for="(cell, i) in sortedCells" :key="i">
{{ cell.consultingBudgetHeadName }}
</li>
</div>

Answer 2

我认为更好的解决方案是在数据库中为项目的index增加一个字段，然后在前端检索数据时，可以根据该字段对列表进行排序。

例如

"cells": [
{
"consultingBudgetHeadName": "Available hours",
"value": 1806,
"valueMap": "1 806",
"order": 1,
},
{
"consultingBudgetHeadName": "Available customer hours",
"value": 1773.2,
"valueMap": "1 773,20",
"order": 3,
},
{
"consultingBudgetHeadName": "Absence hours",
"value": 32.8,
"valueMap": "32,80",
"order": 2,
},
{
"consultingBudgetHeadName": "Available hours project",
"value": -7092.8,
"valueMap": "-7 092,80",
"order": 6,
},
{
"consultingBudgetHeadName": "Average price",
"value": 0,
"valueMap": "0",
"order": 4,
},
{
"consultingBudgetHeadName": "Agreement hours",
"value": 8866,
"valueMap": "8 866",
"order": 5,
},
{
"consultingBudgetHeadName": "Utilization agreements %",
"value": 500,
"valueMap": "500",
"order": 7,
}
]

然后为已排序的单元格设置一个计算属性。

computed: {
sortedCells() {
return this.cells.sort((a, b) => a.order - b.order)
}
}

Answer 3

您可以将排序键的列表放在一个数组中，并将v-for放在上面。

<div v-for="a in all">
<div v-for="key in presortedListOfKeys">
{{a[key]}}
</div>
</div>