Question

我有一个看起来像这样的对象：

分组联系人：

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

然后我有另一个数组：

companyList.models：

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

因此，我公司中的ID类似于我的分组联系人中的键，在一个数组中，我具有公司名称，在另一个数组中，我具有公司的联系人。

现在我想像这样在多个课程表中显示它们

Table 1
Company A (id4)
- foo
- bar 

Table2 
Company B (id6)
- foo bar

这是我的代码，很不幸，我得到了我的2家公司的2张桌子，但没有联系人。而且我没有任何错误：

<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>

这是我在浏览器中得到的结果：

Answer 1

我建议如下使用名为companies的计算属性：

 computed: {
        companies() {

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

      }

然后像这样循环遍历它：

 <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>

Answer 2

应避免将v-if与v-for混合（as stated in the Vue.js docs）。

根据文档的建议，在这种情况下，您可以使用computed property：

<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>

希望这会有所帮助！

Vue JS for条件循环

2 个答案: