javascript - Multiple nested v-for loops filtering for unique data

Question

I'm looking for some help looping through some data with nested v-for loops, eliminating the duplicate states, and throwing the corresponding counties under the matching states. Basically, I'm trying to have the outcome like this:

company 1
Areas Served
State 1 no duplicates
All Counties Matching State 1 under company 1
State 2 no duplicates
All Counties Matching State 2 under company 1


company 2
Areas Served
State 1 no duplicates
All Counties Matching State 1 under company 2
State 2 no duplicates
All Counties Matching State 2 under company 2

I've tried a few different computed methods with no luck, and the data structure with the duplicates is throwing me off. Any help would be appreciated!

https://codesandbox.io/s/vue-template-rnrh7

<template>
  <div class="companies">
    <div v-for="ac in acList" :key="ac.Id">
      <div class="post-block">
        <h2 class="mb0">
          {{ac.Name}} -
          <small>{{ac.Country}}</small>
        </h2>
        <h3>Areas Served</h3>

        <div v-for="region in ac.Regions">
          {{region.RegionName + ", " + region.RegionGroupName}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Companies",
  data() {
    return {
      acList: [
        {
          Name: "Name 1",
          Address: "Address 1",
          City: "New Orleans",
          State: "LA",
          PostalCode: "70130",
          Country: "USA",
          Regions: [
            {
              Country: "USA",
              RegionName: "Humphreys",
              RegionGroupName: "MS",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "Smith",
              RegionGroupName: "MS",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "Plaquemines",
              RegionGroupName: "LA",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "West Feliciana",
              RegionGroupName: "LA",
              RegionType: "County"
            }
          ]
        },
        {
          Name: "Name 2",
          Address: "Address 2",
          City: "New York",
          State: "NY",
          PostalCode: "10001",
          Country: "USA",
          Regions: [
            {
              Country: "USA",
              RegionName: "ALbany",
              RegionGroupName: "NY",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "Chenango",
              RegionGroupName: "NY",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "Gloucester",
              RegionGroupName: "NJ",
              RegionType: "County"
            },
            {
              Country: "USA",
              RegionName: "Essex",
              RegionGroupName: "NJ",
              RegionType: "County"
            }
          ]
        }
      ]
    };
  },
  methods: {

  },
  computed: {

  }
};
</script>

<style scoped>
</style>

标签： javascriptvuejs2vue-component

Answer 1

这是你问的开始吗？从您的问题/示例中很难分辨。您可能需要使用 RegionGroupName 而不是 State ......很难从您的问题中分辨出来。

   <div v-for="state in states" :key="state">
    <p>{{ state }}</p>
    // For each state lookup all matching states in acList
    <div>{{ someMethod(state) }}</div>
   </div>

   someMethod(state) {
     return this.acList.filter((x) => x.State === state);
   }

   computed: {
     states() {
       return new Set(this.acList.map((x) => x.State).sort());
     },
   }