>

일부 데이터를 가져오고 있습니다. 이 데이터를 키별로 그룹화 한 다음 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  위의 그룹과 location: west 가있는 모든 항목에 함께  아래 다른 그룹에 있습니다.

  • 답변 # 1

    왜 당신이 groupBy 를 부르는지 모르겠습니다  for 루프가 반복 될 때마다

    details[0].location 로이 필터링을 해결하겠습니다.   continental 의 Object.values ​​() :

     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>
    
    

관련 자료

  • 이전 c# - Azure 함수에서 MessageSender에 바인딩하는 방법은 무엇입니까?
  • 다음 java - Log4J2 AsyncLogger가 높은 동시성으로 LMAX 방해 기의 링 버퍼를 채우고 있습니다