javascript - 多个嵌套 v-for 循环过滤唯一数据

Question

我正在寻找一些帮助，以使用嵌套的 v-for 循环循环某些数据，消除重复的州，并将相应的县放入匹配的州下。基本上，我试图得到这样的结果:

公司1
服务地区
状态 1 无重复
公司 1 下与州 1 匹配的所有县
状态 2 无重复
公司 1 下与州 2 匹配的所有县


公司2
服务地区
状态 1 无重复
公司 2 下与州 1 匹配的所有县
状态 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());
     },
   }