无法在 v-for 循环中显示数组中的所有对象，仅显示最后一个对象

Question

我正在提取一些数据。我正在按键对这些数据进行分组，然后尝试在 Vue 中的 v-for 循环中打印出来。

代码看起来像这样：

// 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 中我只得到了数组中的最后一个对象。

看似简单实则难倒

任何帮助将不胜感激！

The desired outcome is that I'd like to print all the items that have location: north together in a group above and all the items that have location: west in a different group below.

Answer 1

我不明白你为什么在 for 循环的每次迭代中调用 groupBy。

我会解决这个 filtering by details[0].location the Object.values()s of continental:

  methods: {
    filterByLocation: function(location) {
      return Object.values(this.continental).filter(v => v.details[0].location === location)
    }
  }

示例：

new Vue({
  el: '#app',
  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"
          ]
        }]
      }
    }
  },
  methods: {
    filterByLocation: function(location) {
      return Object.values(this.continental).filter(v => v.details[0].location === location)
    }
  }
})

#app {
  display: flex;
  justify-content: space-around;
  max-width: 600px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <h2>North locations</h2>
    <ol>
      <li v-for="loc in filterByLocation('north')" :key="loc.weather">
        {{loc.weather}}
      </li>
    </ol>
  </div>
  <div>
    <h2>West locations</h2>
    <ol>
      <li v-for="loc in filterByLocation('west')" :key="loc.weather">
        {{loc.weather}}
      </li>
    </ol>
  </div>
</div>

无法在 v-for 循环中显示数组中的所有对象，仅显示最后一个对象

Unable to show all objects in array on v-for loop, only showing last object

arrays

json

vue.js

v-for