V-If 在 V-for 内部，在 V-for 内部

Question

我是 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 中获取值吗？

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

V-If 在 V-for 内部，在 V-for 内部

V-If inside V-for, inside V-for

json

vue.js

v-for