V-If 在 V-for 内，在 V-for 内答案

【问题标题】：V-If inside V-for, inside V-forV-If 在 V-for 内，在 V-for 内
【发布时间】：2021-02-28 03:42:32
【问题描述】：

我是 Vue 的新手，我正在尝试在两个 v-for 中运行 IF 语句。基本上，我试图将一个对象数组的值与另一个对象数组的值进行比较，如果为真，则从第 2 个对象数组中渲染值。

这里是代码。

      <div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
        <div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
          <div v-if="rec.name.display_value == proj.task_owner">
            <h3>Projects Working On</h3>
            <ul>
              <li><a href="">{{proj.projects_working_on.project_name}}</a></li>
              <li><submitbutton button_label="Hide Projects" @click="toggleClass()"></submitbutton></li>
            </ul>
          </div>
        </div>
      </div>

这是我的 2 个对象数组。

    const dummyProjectsData = [
  {
    ID: "44000005501077",
    task_owner: "Denis Denchev",
    projects_working_on: [
      {
      "project_name": "Project-1",
      "project_id": "195000002362044"
      },
      {
      "project_name": "Project-2",
      "project_id": "195000002362045"
      },
      {
      "project_name": "Project-3",
      "project_id": "195000002362046"
      },
    ]
  },
  {
    ID: "44000005501078",
    task_owner: "Jake Jones",
    projects_working_on: [
      {
      "project_name": "Project-2",
      "project_id": "195000002362044"
      },
      {
      "project_name": "Project-5",
      "project_id": "195000002362045"
      },
      {
      "project_name": "Project-3",
      "project_id": "195000002362046"
      },
    ]
  },
]

还有第二个数组...

 const listOfEmployees = [
  {
    "ID": "44000005527013",
    "name": {
     "display_value": "Denis Denchev",
     "first_name": "Denis",
     "last_name": "Denchev",
     "prefix": "",
     "suffix": "",
    }
  }
]

我做错了什么？我想念的东西一定很愚蠢吗？或者我可以不做 if 语句从两个 v-for 中取值吗？

【问题讨论】：

标签： json vue.js v-for

【解决方案1】：

问题在于proj.projects_working_on 是一个包含多个项目的数组，但您正试图像访问对象一样访问其上的属性。更改为：

<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
  <div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
    <div v-if="rec.name.display_value == proj.task_owner">
      <h3>Projects Working On</h3>
      <ul>
        <li v-for="p in proj.projects_working_on" v-bind:key="p.project_id">
           <a href="">{{ p.project_name }}</a>
        </li>
        <li><submitbutton button_label="Hide Projects" @click="toggleClass()"></submitbutton></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：