[Vuejs]-Vue js for loop with a condition

by

1👍

I recommend to use a computed property called companies as follows :

 computed: {
        companies() {

          return this.models.map(c => {
            c.groups = this.groupContacts[c.id];
            return c;
          })
        }

      }

then loop through it like :

 <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
          <h4 class="mb-4">{{company.name}}</h4>

          <table>
            <thead>
              <tr>
                <th class="text-left">Name</th>

              </tr>
            </thead>
            <tbody>
              <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
                <td> {{contact.name}}</td>
              </tr>
            </tbody>
          </table>
        </div>

new Vue({
  el: '#app',

  data() {

    return {
      groupContacts:

      {
        4: [{
            name: 'foo'
          },
          {
            name: 'bar'
          }
        ],
        6: [{
          name: 'foo bar'
        }, ]
      },
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  },
  computed: {
    companies() {

      return this.models.map(c => {
        c.groups = this.groupContacts[c.id];
        return c;
      })
    }

  }
})
<body>
  <div id="app">

    <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
      <h4 class="mb-4">{{company.name}}</h4>

      <table>
        <thead>
          <tr>
            <th class="text-left">Name</th>

          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
            <td> {{contact.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
👤Boussadjra Brahim

0👍

mixing v-if with v-for should be avoided (as stated in the Vue.js docs).

Following the recommendation from the docs, you could use a computed property for this case:

<template>
  <div>
    <div v-for="(company, i) in companyContacts" :key="`company_${i}`" class="table table--hover mt-4">
      <h4 class="mb-4" v-html="company.name" />
      <table>
        <thead>
          <tr>
            <th class="text-left" v-html="__t('name')" />
          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, j) in company.contacts" :key="`company_${i}_contact_${j}`">
            <td v-html="contact.name" />
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    companyContacts() {
      return this.companyList.models.map(model => {
        model.contacts = this.groupContacts[model.id]
        return model
      })
    }
  },
  data: () => {
    groupedContacts: {
      4: [{
          name: 'foo'
        },
        {
          name: 'bar'
        }
      ],
      6: [{
        name: 'foo bar'
      }, ]
    },
    companyList: {
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  }
}
</script>

Hope this helps!

👤Christoph Pahmeyer

Leave a comment