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

Posted 2023-02-22

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

【英文标题】：Unable to show all objects in array on v-for loop, only showing last object

【发布时间】：2019-06-22 21:41:51

【问题描述】：

我正在提取一些数据。我正在按键对这些数据进行分组，然后尝试在 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 中我只得到数组中的最后一个对象。

看起来很简单，但我真的很难过。

任何帮助将不胜感激！

期望的结果是我想打印上面一组中所有具有location: north 的项目，以及下面不同组中的所有具有location: west 的项目。

【问题讨论】：

你能分享任何像 jsFiddle 这样工作的例子吗（这将有助于找出问题）？

您的代表是v-for="pos in posArray"，而不是v-for="pos in groupedByPos"。 posArray 中有什么内容？

@SajibKhan 为了清楚起见，我添加了更多细节。

@AndreiGheorghiu 对。为了清楚起见，我在上面添加了一个更详细的示例。我在 v-for 中调用的内容（这次是 locArray）被分配了 groupedByLocation 的内容，这是在 console.log 中正确打印出来的内容

期望的结果是我想打印上面一组中所有具有location: north 的项目，以及下面不同组中的所有具有location: west 的项目。

【参考方案1】：

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

我会通过details[0].location 和continental 的Object.values()s 来解决这个filtering：

  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>

【讨论】：

这就像一个魅力！我想我把事情复杂化了。非常感谢！