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

by

0👍

✅

I don’t understand why you’re calling groupBy on each iteration of your for loop.

I would solve this 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)
    }
  }

Example: 

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>
👤tao

Leave a comment