Я ввожу некоторые данные. Я группирую эти данные по ключу, а затем пытаюсь распечатать их в цикле v-for в Vue.
Код выглядит примерно так:
// I initialize an empty array in data
data() {
return {
locArray: []
}
}
// This is done in the api call, in beforeRouteEnter()
const items = data.continental;
Array.prototype.groupBy = function(prop) {
return this.reduce(function(groups, item) {
const val = item[prop];
groups[val] = groups[val] || [];
groups[val].push(item);
return groups;
}, {});
};
for (let i in items) {
let source = items[i];
let details = source.details;
let groupedByLocation = details.groupBy(location);
vm.locArray = groupedByLocation
}
// This is an example of what the data looks like
{
data: {
continental: {
countryOne: {
weather: "weatherOne",
details: [{
location: "west",
foods: "foodOne",
mainCities: [
"cityOne",
"cityTwo",
"cityThree"
]
}]
},
countryTwo: {
weather: "weatherTwo",
details: [{
location: "north",
foods: "foodTwo",
mainCities: [
"cityOne",
"cityTwo",
"cityThree"
]
}]
},
countryThree: {
weather: "weatherThree",
details: [{
location: "north",
foods: "foodThree",
mainCities: [
"cityOne",
"cityTwo",
"cityThree"
]
}]
},
countryFour: {
weather: "WeatherFour",
details: [{
location: "west",
foods: "foodFour",
mainCities: [
"cityOne",
"cityTwo",
"cityThree"
]
}]
},
countryfive: {
weather: "WeatherFive",
details: [{
location: "north",
foods: "foodFive",
mainCities: [
"cityOne",
"cityTwo",
"cityThree"
]
}]
}
}
}
}
<div class="entry-content">
<div class="single-entry" v-for="loc in locArray" :key="loc.id">
<span class="test-wrap">{{ loc }}</span>
</div>
</div>
Когда я console.log(groupedByLocation)
получаю все данные, которые должны отображаться, но в v-for я получаю только последний объект в массиве.
Это кажется простым, но я действительно в тупике.
Любая помощь будет оценена!
Желаемый результат заключается в том, что я хотел бы напечатать все элементы, которые имеют
location: north
вместе в группе выше, и все элементы, которые имеютlocation: west
в другой группе ниже.
v-for="pos in posArray"
, а неv-for="pos in groupedByPos"
. Что вposArray
? - person tao   schedule 29.01.2019locArray
), получает содержимоеgroupedByLocation
, что правильно распечатывается вconsole.log
- person ale_aalt   schedule 29.01.2019location: north
вместе в группе выше, и все элементы, которые имеютlocation: west
в другой группе ниже. - person ale_aalt   schedule 29.01.2019