根据数组中的对象属性生成带头部的列表
根据数组中的对象属性生成带头部的列表
提问于 2019-05-30 05:44:07
在Vue中，我试图根据对象中的属性生成一个列表。我有一个来自vuex商店的数组，看起来像这样：
const array = [
{
name: "British title string"
nationality: "British"
},
{
name: "Another title"
nationality: "American"
},
{
name: "Name"
nationality: "Dutch"
},
{
name: "Another american item"
nationality: "American"
},
];我想要的是使用v-for的输出：
<h2>British</h2>
<ul>
<li>British title string</li>
</ul>
<h2>American</h2>
<ul>
<li>Another title</li>
<li>Another american item</li>
</ul>
<h2>Dutch</h2>
<ul>
<li>Name</li>
</ul>我已经使用lodash _.sortBy按nationality属性对数组进行了排序，并给出了一个按国籍排序的数组，但我想添加一个值为_.sortBy的H2元素。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-30 07:07:00
如果您有多个具有相同国籍的项目，并且希望对它们进行分组，请在_.sortBy()之前使用_.groupBy()
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
template: '#appTemplate',
data: () => ({
rawData: [{
name: "British title string",
nationality: "British"
},
{
name: "Another title",
nationality: "American"
},
{
name: "Name",
nationality: "Dutch"
},
{
name: "Another american item",
nationality: "American"
}
]
}),
computed: {
groupedItems() {
return _.sortBy(
_.map(
_.groupBy(this.rawData, 'nationality'),
items => ({
items,
nationality: items[0].nationality
})
),
['nationality']
);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
<div>
<template v-for="group in groupedItems">
<h2 v-text="group.nationality" />
<ul>
<li v-for="(item, index) in group.items" :key="index" v-text="item.name" />
</ul>
</template>
</div>
</script>
<div id="app"></div>
为了方便和数据可读性，我将第一个项目的nationality映射为组的国籍(并将分组的项目命名为items)，但是您也可以在模板中直接使用项目0的国籍。
为了演示，下面是它应该是什么样子的：
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
template: '#appTemplate',
data: () => ({
rawData: [{
name: "British title string",
nationality: "British"
},
{
name: "Another title",
nationality: "American"
},
{
name: "Name",
nationality: "Dutch"
},
{
name: "Another american item",
nationality: "American"
}
]
}),
computed: {
groupedItems() {
return _.sortBy(
_.groupBy(this.rawData, 'nationality'),
['0.nationality']
);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
<div>
<template v-for="grouped in groupedItems">
<h2 v-text="grouped[0].nationality" />
<ul>
<li v-for="(item, index) in grouped" :key="index" v-text="item.name" />
</ul>
</template>
</div>
</script>
<div id="app"></div>
注意上面的两个示例都输出了所需的标记。如果您希望每个项目都有自己的包装器，请将<template>替换为html标签并添加键。即：
<article v-for="(grouped, key) in groupedItems" :key="key">Stack Overflow用户
发布于 2019-05-30 06:05:55
考虑到数组是有序的，您可以这样做：
const array = [
{
name: "Another title",
nationality: "American"
},
{
name: "Another american item",
nationality: "American"
},
{
name: "British title string",
nationality: "British"
},
{
name: "Name",
nationality: "Dutch"
},
];
const arrayAux = [];
var j = 0;
for (var i = 0; i < array.length;) {
console.log(array[i].name);
arrayAux.push({
nationality: array[i].nationality,
names: [array[i].name]
});
i++;
while ( i < array.length && array[i].nationality === array[i - 1].nationality) {
arrayAux[j].names.push(array[i].name);
i++;
}
j++;
}
console.log(arrayAux);在html中：
<div v-for="item in arrayAux">
<h2>{{ item.nationality }}</h2>
<ul>
<li v-for="n in item.names">
{{ n.name }}
</li>
</ul>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56368940
复制相关文章
相似问题