Javascript 带条件的循环的Vue js

我有一个像这样的对象：

分组联系人：

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

然后我有另一个数组：

companyList.models：

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

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

现在我想把它们显示在多个表中，当然是这样

Table 1
Company A (id4)
- foo
- bar 

Table2 
Company B (id6)
- foo bar

这是我的代码，不幸的是，我得到了我两家公司的两张表，但没有联系人。我没有任何错误：

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

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

---

我建议使用名为companys的计算属性，如下所示：

 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>

{{company.name} 名称 {{contact.name} 应避免混合v-if和v-for

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

导出默认值{ 计算：{ 公司联系人{ 返回this.companyList.models.mapmodel=>{ model.contacts=this.groupContacts[model.id] 回归模型 } } }, 数据：=>{ 分组联系人：{ 4: [{ 姓名：“富” }, { 名称：“酒吧” } ], 6: [{ 名称：“富吧” }, ] }, 公司名单：{ 型号：[{ id:4， 名称：“A公司” }, { id:6， 名称：“B公司” }, ] } } }

---

希望这有帮助

我猜你误用了v-html，你能检查一下吗？？对于您所给出的普通数据，不需要它。如果您有字符串格式的html结构，并且希望在浏览器中按原样呈现该结构，则需要使用它。希望这有助于获得解决方案。我使用v-html：这不会改变任何信息