title: Loop through a dynamic array in Vue.js and then add each object component to divs in a separate component based on a corresponding value?
body: <p>I am trying to make a Vue app that lists company offices based on regions. I have a main home view, an offices components, and an office item component. I am using v-for in the offices component to loop through the office items and display them. That works to list them all out. However, I need to sort the office items into separate divs based on the value of "Region". There are 5 regions. I cannot figure out how to loop through them based on that single value.</p>
  
  <p>I know how to import components to one another, but I am trying to loop through all of the office items within the offices component. My guess is to do a loop within a loop, but do I need another component that I'm missing?</p>
  
  <p>office item component:</p>
  
  <pre><code>&lt;div class="office" :class="office.Region"&gt;
    &lt;p&gt;{{office.Name}}&lt;/p&gt;
    &lt;p&gt;{{office.Address}}&lt;/p&gt;
    &lt;p&gt;{{office.Country}}&lt;/p&gt;
    &lt;p&gt;{{office.Region}}&lt;/p&gt;
    &lt;p&gt;{{office.Email}}&lt;/p&gt;
    &lt;p&gt;{{office.Phone}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>offices component:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div v-for="office in offices" :key="office.name"&gt;
      &lt;div class="office-container global" v-if="office.Region === 'Global'"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;OfficeItem v-bind:office="office"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="office-container north" v-if="office.Region === 'North America'"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;OfficeItem v-bind:office="office"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="office-container europe" v-if="office.Region === 'Europe, Middle East and Africa'"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;OfficeItem v-bind:office="office"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;         
      &lt;div class="office-container asia" v-if="office.Region === 'Asia Pacific'"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;OfficeItem v-bind:office="office"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="office-container latin" v-if="office.Region === 'Latin America'"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;OfficeItem v-bind:office="office"/&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>a hardcoded array of objects:</p>
  
  <pre class="lang-js prettyprint-override"><code>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"
      }
  ]
  </code></pre>
  
  <p>I want there to be only 5 office-container divs with the list of corresponding offices in each one. however, I get multiple office-container (i.e. two north America divs) and multiple empty divs inside of those</p>