Vue js for loop with a condition

Question

I have an object that look like this:

groupedContacts:

{
  4: [
      {name: 'foo'},
      {name: 'bar'}
    ],
  6: [
      {name: 'foo bar'},
    ]
}

Then I have an other array:

companyList.models:

models: [
  {id:4, name: 'company A'},
  {id:6, name: 'company B'},
]

So the Id's in my companies resemble the keys in my groupedContacts, in 1 array I have the company names and in the other I have the contacts of the companies.

Now I want to show them in multiple tables ofcourse like this

Table 1
Company A (id4)
- foo
- bar 

Table2 
Company B (id6)
- foo bar

Here's my code, unfortunately I get my 2 tables of my 2 companies but no contacts. And I get no errors whatsoever:

<div
    v-for="(company, key) in companyList.models"
    :key="key"
    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
      v-for="(groupContacts, key) in groupedContacts"
      :key="key"
      v-if="company.id === key"
    >
      <tr
        v-for="(contact, contactKey) in groupContacts"
        :key="contactKey"
      >
        <td v-html="contact.name" />
      </tr>
    </tbody>
  </table>
</div>

This is my result in my browser:

I guess you are misusing v-html, can you check that ?? For plain data as you given in question, it's not needed. It's needed in cases where you have html structure in string format & you want that structure to be rendered in browser as is. Hope this helps to get solution. — Tushar Kshirsagar
– Tushar Kshirsagar, Commented Mar 30, 2020 at 13:26

Boussadjra Brahim · Accepted Answer · 2020-03-30 13:53:48Z

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/[email protected]/dist/vue.js"></script>

tony19 · Accepted Answer · 2022-07-16 05:16:33Z

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!

Collectives™ on Stack Overflow

Vue js for loop with a condition

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related