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

我正在寻找一些帮助，通过嵌套的v-for循环遍历一些数据，消除重复状态，并将相应的县置于匹配状态下。基本上，我试图得到这样的结果：

公司1
服务区域
状态1无重复项
公司1下符合州1的所有县
状态2无重复项
公司1下符合州2的所有县


公司2
服务区域
状态1无重复项
符合公司2下州1的所有县
状态2无重复项
公司2下符合州2的所有县

我尝试了几种不同的计算方法，但都没有成功，而带有重复项的数据结构让我很反感。任何帮助都将不胜感激

{{ac.Name}}-
{{ac.Country}
服务区域
{{region.RegionName+”，“+region.RegionGroupName}
导出默认值{
名称：“公司”，
数据（）{
返回{
列表：[
{
名称：“名称1”，
地址：“地址1”，
城市：“新奥尔良”，
国家：“洛杉矶”，
邮政编码：“70130”，
国家：“美国”，
区域：[
{
国家：“美国”，
地区名称：“汉弗莱斯”，
RegionGroup名称：“MS”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“史密斯”，
RegionGroup名称：“MS”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“广场”，
区域组名称：“LA”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“西费利西亚纳”，
区域组名称：“LA”，
区域类型：“县”
}
]
},
{
姓名：“姓名2”，
地址：“地址2”，
城市：“纽约”，
国家：“纽约”，
邮政编码：“10001”，
国家：“美国”，
区域：[
{
国家：“美国”，
地区名称：“奥尔巴尼”，
RegionGroup名称：“NY”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“Chenango”，
RegionGroup名称：“NY”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“格洛斯特”，
RegionGroup名称：“NJ”，
区域类型：“县”
},
{
国家：“美国”，
地区名称：“埃塞克斯”，
RegionGroup名称：“NJ”，
区域类型：“县”
}
]
}
]
};
},
方法：{
},
计算：{
}
};

这就是你要问的问题的开始吗？从你的问题/例子中很难判断。您可能需要使用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());
     },
   }

{{state}}

//对于每个状态，在acList中查找所有匹配的状态
{{someMethod（state）}
方法（状态）{
返回此.acList.filter（（x）=>x.State===State）；
}
计算：{
国家（）{
返回新的集合（this.acList.map（（x）=>x.State.sort（））；
},
}

我从组件中剥离了大量内容来发布它，但看起来我还有一些不相关的东西。我需要三个相互嵌套的v-for元素，中间的一个消除了acList.Regions中重复的RegionGroupName。最底层的地图将县映射到州。好的，如果我没弄错的话，这就是你想要的。对真棒的回答！非常感谢！我要研究你用这两种方法做了什么！很高兴我能帮忙。我试着让它尽可能简单明了。如果您需要解释发生了什么，请告诉我。我更新了代码，但您只需在末尾添加一个过滤器，以检查该条目的区域是否有1个或多个条目。返回copy.filter（entry=>entry.Regions.length>0）；

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