Фильтрация нескольких вложенных циклов v-for для уникальных данных

Question

Мне нужна помощь в прохождении некоторых данных с помощью вложенных циклов v-for, устранении дублирующихся состояний и выбрасывании соответствующих округов в соответствующие состояния. По сути, я пытаюсь получить такой результат:

компания 1Обслуживаемые районыСостояние 1 без дубликатовВсе округа, соответствующие государству 1 под компанией 1Состояние 2 без дубликатовВсе Графства Соответствующего Штата 2 под компанией 1компания 2Обслуживаемые районыСостояние 1 без дубликатовВсе графства, соответствующие государству 1 под компанией 2Состояние 2 без дубликатовВсе графства, соответствующие государству 2 под компанией 2Я безуспешно пробовал несколько разных вычислительных методов, и структура данных с дубликатами меня отбрасывает. Любая помощь будет оценена!

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>

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());
     },
   }