Javascript 循环Vue.js中的动态数组，然后根据相应的值将每个对象组件添加到单独组件中的div？

我正在尝试制作一个Vue应用程序，根据地区列出公司办公室。我有一个主主视图、一个office组件和一个office项目组件。我在offices组件中使用v-for循环浏览办公项目并显示它们。这样就可以把它们都列出来了。但是，我需要根据“Region”的值将办公项目分为不同的div。有5个地区。我不知道如何基于单个值循环它们

我知道如何将组件相互导入，但我正在尝试遍历office组件中的所有office项。我的猜测是在一个循环中做一个循环，但是我需要另一个我缺少的组件吗

办公项目构成部分：

<div class="office" :class="office.Region">
  <p>{{office.Name}}</p>
  <p>{{office.Address}}</p>
  <p>{{office.Country}}</p>
  <p>{{office.Region}}</p>
  <p>{{office.Email}}</p>
  <p>{{office.Phone}}</p>
</div>

<div>
  <div v-for="office in offices" :key="office.name">
    <div class="office-container global" v-if="office.Region === 'Global'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container north" v-if="office.Region === 'North America'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container europe" v-if="office.Region === 'Europe, Middle East and Africa'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>         
    <div class="office-container asia" v-if="office.Region === 'Asia Pacific'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container latin" v-if="office.Region === 'Latin America'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
  </div>
</div>

我希望只有5个办公室容器分区，每个分区都有相应的办公室列表。但是，我得到了多个office容器（即两个北美div）和其中的多个空div

[…新集合（this.offices.map（o=>o.Region））]

提供了所有区域的列表

您可以使用过滤方法循环浏览此列表并显示具有该区域的办公室：

officesOfRegion(region) {
  return this.offices.filter(o => o.Region === region)
},

Vue.config.productionTip=false；
Vue.config.devtools=false；
新Vue({
el:'钩子'，
模板：“#appTemplate”，
数据：({
办公室：[{
名称：“公司总部”，
地址：“犹他州南约旦西10000南698号500室，邮编84095”，
国家：“美国”，
区域：“北美”，
电子邮件：“contact@ivanti.com",
电话：“+1-888-253-6201”
},
{
名称：“EMEA总部”，
地址：“都柏林哈考特街2号欧罗巴大厦一楼，D02 WR20”，
国家：“爱尔兰”，
区域：“欧洲、中东和非洲”，
电子邮件：“contact@ivanti.me",
电话：“+3531411710”
},
{
名称：“印度”，
地址：“班加罗尔2层4A单元巴格曼科技园”，
国家：“印度”，
区域：“亚太”，
电子邮件：“contact@ivanti.com",
电话：“
},
{
名称：“巴西”，
地址：“圣保罗拜罗穆卡，博尔赫斯·德菲盖雷多，303-4楼，SP 03110-010”，
国家：“巴西”，
区域：“拉丁美洲”，
电子邮件：“联系-brazil@ivanti.com",
电话：“+55111360343”
},
{
名称：“美国（西雅图）”，
地址：“华盛顿州西雅图西街1011号西南700号，邮编98104”，
国家：“美国”，
区域：“北美”，
电子邮件：“contact@ivanti.com",
电话：“+1-206-274-4280”
}
]
}),
计算：{
区域（）{
返回[…新集合（this.offices.map（o=>o.Region））]
}
},
方法：{
地区办事处（地区）{
返回此.offices.filter（o=>o.Region==Region）
},
显示JSON（o）{
返回JSON.stringify（o，null，2）；
}
},
})

看起来模板中唯一改变的是

OfficeItem

组件周围的类

要使代码不那么枯燥，请尝试在

OfficeItem

组件中应用条件登录，如下所示

//OfficeItem.vue
{{office.Region}
const regional_classes={
A:‘A级和另一个A级’，
B:‘B级和另一个B级’，
C:“C类和另一个C类”，
D:“D类和另一个D类”，
Z:“class_Z和-other-Z-class”
}
导出默认值{
名称：“办公项目”，
道具：{
办公室：反对
},
方法：{
getRegionClass（区域）{
返回区域|u类[区域]||”
}
}
};

您希望将原始数组按位置分为多个office数组？或者您的办公室按区域但按字母顺序排序？我希望它们按区域排序，然后根据区域放置在相应的div中。不必按字母顺序，而且我不确定是否制作单独的数组会使IT过于复杂，因为目前这些项目都没有相同的

区域

？哦，我明白了，你想根据它们的区域对某些办公室进行不同的处理。我对v-html和v-text不太熟悉。如何在不实际显示文本json对象的情况下显示它？我添加了一个带有标记的版本

v-text

和

v-html

只需将元素的内容（作为文本或html）设置为提供的值。作为旁注，您正在执行

：class=“office.region”

。这将输出

class=“欧洲、中东和非洲”

。确实要在元素上使用逗号和空格的类吗？这基本上导致了多个类。根据一般编码设计原则，我强烈建议不要这样做。@Holly，还请注意，我在第二个示例中使用了一种方法来列出所有对象属性：

Object.keys（obj）

。问题：我需要根据“Region”的值将办公项目分为不同的div。也许你不应该假设所有地区都有一个办事处。问题是：“动态数组”。这就是为什么你应该期待它改变。数据集只是一个例子。老实说，我一直在努力弄清楚OP到底需要什么。在示例中，Holly需要在每次迭代中添加一个特定于区域的CSS类，而不是将数组按区域排序到office中，然后进行渲染。我认为这很简单。我们不是来帮助霍莉的。我们在这里帮助任何可能来这里寻找类似案例解决方案的人。这使事情简化了一点，你不同意吗？我觉得很简单。我们不是来帮助霍莉的。我们是来帮助任何人的