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

标签 javascript arrays loops vue.js vue-component

我正在尝试制作一个 Vue 应用程序，根据地区列出公司办事处。我有一个主主页 View 、一个办公室组件和一个办公项目组件。我在 Office 组件中使用 v-for 来循环遍历 Office 项目并显示它们。这可以将它们全部列出来。但是，我需要根据“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>

硬编码的对象数组:

offices: [
    {
      Name: "Corporate Headquarters",
      Address: "Suite 500, 698 West 10000 South, South Jordan, Utah 84095",
      Country: "USA",
      Region: "Global",
      Email: "contact@ivanti.com",
      Phone: "+1-888-253-6201"
    },
    {
      Name: "EMEA Headquarters",
      Address: "First Floor Europa House, Harcourt Street Dublin 2, D02 WR20",
      Country: "Ireland",
      Region: "Europe, Middle East and Africa",
      Email: "contact@ivanti.me",
      Phone: "+ 353 1 411 7100"
    },
    {
      Name: "India",
      Address: "Bagmane Tech Park, Unit No. 4A, Level 2 , Bangalore",
      Country: "India",
      Region: "Asia Pacific",
      Email: "contact@ivanti.com",
      Phone: ""
    },
    {
      Name: "Brazil",
      Address: "Borges de Figueiredo, 303 - 4th floor, Bairro Mooca, São Paulo, SP 03110-010",
      Country: "Brazil",
      Region: "Latin America",
      Email: "contact-brazil@ivanti.com",
      Phone: "+55 11 9 8136 0343"
    },
    {
      Name: "United States (Seattle)",
      Address: "1011 Western Ave SW #700, Seattle, WA 98104",
      Country: "United States",
      Region: "North America",
      Email: "contact@ivanti.com",
      Phone: "+1-206-274-4280"
    }
]

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

最佳答案

[...new Set(this.offices.map(o => o.Region))] 为您提供所有区域的列表。

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

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


Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({
    offices: [{
        Name: "Corporate Headquarters",
        Address: "Suite 500, 698 West 10000 South, South Jordan, Utah 84095",
        Country: "USA",
        Region: "North America",
        Email: "contact@ivanti.com",
        Phone: "+1-888-253-6201"
      },
      {
        Name: "EMEA Headquarters",
        Address: "First Floor Europa House, Harcourt Street Dublin 2, D02 WR20",
        Country: "Ireland",
        Region: "Europe, Middle East and Africa",
        Email: "contact@ivanti.me",
        Phone: "+ 353 1 411 7100"
      },
      {
        Name: "India",
        Address: "Bagmane Tech Park, Unit No. 4A, Level 2 , Bangalore",
        Country: "India",
        Region: "Asia Pacific",
        Email: "contact@ivanti.com",
        Phone: ""
      },
      {
        Name: "Brazil",
        Address: "Borges de Figueiredo, 303 - 4th floor, Bairro Mooca, São Paulo, SP 03110-010",
        Country: "Brazil",
        Region: "Latin America",
        Email: "contact-brazil@ivanti.com",
        Phone: "+55 11 9 8136 0343"
      },
      {
        Name: "United States (Seattle)",
        Address: "1011 Western Ave SW #700, Seattle, WA 98104",
        Country: "United States",
        Region: "North America",
        Email: "contact@ivanti.com",
        Phone: "+1-206-274-4280"
      }
    ]
  }),
  computed: {
    regions() {
      return [...new Set(this.offices.map(o => o.Region))]
    }
  },
  methods: {
    officesOfRegion(region) {
      return this.offices.filter(o => o.Region === region)
    },
    displayJson(o) {
      return JSON.stringify(o, null, 2);
    }
  },

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <h3 v-text="region"></h3>
      <ul>
        <li v-for="(office, i) in officesOfRegion(region)" :key="i">
          <pre v-html="displayJson(office)"></pre>
        </li>
      </ul>
    </div>
  </div>
</script>
<div id="hook"></div>

我没有看你的标记，因为它不相关。一旦数据正确排序，您就可以使用任何您想要的标记。

这是您的标记:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({
    offices: [{
        Name: "Corporate Headquarters",
        Address: "Suite 500, 698 West 10000 South, South Jordan, Utah 84095",
        Country: "USA",
        Region: "North America",
        Email: "contact@ivanti.com",
        Phone: "+1-888-253-6201"
      },
      {
        Name: "EMEA Headquarters",
        Address: "First Floor Europa House, Harcourt Street Dublin 2, D02 WR20",
        Country: "Ireland",
        Region: "Europe, Middle East and Africa",
        Email: "contact@ivanti.me",
        Phone: "+ 353 1 411 7100"
      },
      {
        Name: "India",
        Address: "Bagmane Tech Park, Unit No. 4A, Level 2 , Bangalore",
        Country: "India",
        Region: "Asia Pacific",
        Email: "contact@ivanti.com",
        Phone: ""
      },
      {
        Name: "Brazil",
        Address: "Borges de Figueiredo, 303 - 4th floor, Bairro Mooca, São Paulo, SP 03110-010",
        Country: "Brazil",
        Region: "Latin America",
        Email: "contact-brazil@ivanti.com",
        Phone: "+55 11 9 8136 0343"
      },
      {
        Name: "United States (Seattle)",
        Address: "1011 Western Ave SW #700, Seattle, WA 98104",
        Country: "United States",
        Region: "North America",
        Email: "contact@ivanti.com",
        Phone: "+1-206-274-4280"
      }
    ]
  }),
  computed: {
    regions() {
      return [...new Set(this.offices.map(o => o.Region))]
    }
  },
  methods: {
    officesOfRegion(region) {
      return this.offices.filter(o => o.Region === region)
    },
    propsOf(o) {
      return Object.keys(o);
    }
  },
  
})
.office p {
  display: flex;
}
.office p strong {
  width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <hr>
      <h3>{{region}}</h3>
      <div v-for="(office, i) in officesOfRegion(region)" :key="i" class="office">
        <hr>
        <p v-for="prop in propsOf(office)"><strong>{{prop}}:</strong> {{office[prop]}}</p>
      </div>
    </div>
  </div>
</script>
<div id="hook"></div>

关于javascript - 循环遍历 Vue.js 中的动态数组，然后根据相应的值将每个对象组件添加到单独组件中的 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56556634/

上一篇：javascript - 如何在 Three.js 中保存加载的模型？

下一篇：javascript - 从多个工作簿/工作表中提取范围

相关文章：

javascript - 如何将绝对时间 ("1:30 PM") 替换为相对时间 ("15 minutes ago") 并让它们自动更新？

c - 选择排序逻辑错误

javascript - 初学者 javascript for 循环拼图

java - 为什么这会导致无限循环？

Javascript 字符串 - 在某一点获取 char

javascript - 使用ajax显示正在选择的内容不起作用，PHP，AJAX，JAVASCRIPT

python - 连接两个大的 numpy 二维数组

arrays - 跳过 “for each”循环中的第一个元素？

c - C 编程新手，需要指导

javascript - 我正在尝试更改此代码中的语法

©2024 IT工具网  联系我们