如何将 Vue.js 与 json 数组一起使用 - 简单示例

Question

我一直在寻找一个简单的例子，所以我来到 SO 社区寻求帮助。

如果我有一个带有这样的数组的 json 对象（外部，假设我们已将其作为“信息”访问）...

{
"Job": {
    "JobId": "123",
    "Tasks": [
        {
            "TaskId": "1",
            "TaskName": "Test Task 1",
            "SubTasks": [
            {
                "SubTaskId": "1",
                "SubTaskName": "Test Sub Task 1"
            },
            {
                "SubTaskId": "2",
                "SubTaskName": "Test Sub Task 2"
            },
            {
                "SubTaskId": "3",
                "SubTaskName": "Test Sub Task 3"
            }
            ]
        },   
        {
            "TaskId": "2",
            "TaskName": "Test Task 2",
            "SubTasks": [
            {
                "SubTaskId": "1",
                "SubTaskName": "Test Sub Task 1"
            },
            {
                "SubTaskId": "2",
                "SubTaskName": "Test Sub Task 2"
            },
            {
                "SubTaskId": "3",
                "SubTaskName": "Test Sub Task 3"
            }
            ]
        }, 
        {
            "TaskId": "3",
            "TaskName": "Test Task 3",
            "SubTasks": [
            {
                "SubTaskId": "1",
                "SubTaskName": "Test Sub Task 1"
            },
            {
                "SubTaskId": "2",
                "SubTaskName": "Test Sub Task 2"
            },
            {
                "SubTaskId": "3",
                "SubTaskName": "Test Sub Task 3"
            }
            ]
        }
    ]
} 
}

如何在 Vue 实例中访问它并访问嵌套数组？我能找到的每一个例子要么在我的脑海中挥之不去，要么看起来像下面这样：

new Vue({
    el: "ID1",
    data: {
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})

但是我已经知道如何使用 v-for 从实例中已经存在的数组中获取数据（我的意思是硬编码），尽管嵌套数组仍然让我有点难以理解，但我不能为如果数组和嵌套数组位于带数组的 json 对象中，我想出了一种直接的方法来访问它们。

我尝试将“数据”按如下方式放入实例中以获取对象：

new Vue({
    el: "ID1",
    data: Info
})

或

new Vue({
    el: "ID1",
        data: {
            items: Info,
            /// extra stuff here 
    }
})

只要我可以访问对象（信息），它就可以工作，但是当我尝试使用 v-for="Task in Tasks" 之类的东西时遇到错误（例如）“Property or method "Tasks"未在实例上定义，但在渲染期间引用。通过初始化属性“确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件”。

我希望能够做到：

<div id="ID1">
    <ul>
        <li v-for="Task in Tasks">{{ Task.TaskId }}</li>
    </ul>
</div>

或进一步：

<div id="ID1">
    <ul>
        <li v-for="SubTask in SubTasks">{{ SubTask.SubTaskId }}</li>
    </ul>
</div>

我知道那些不起作用，只是想举个例子。

对此的任何帮助将不胜感激。随意带我去 Vue 101。我不知道还要问什么或提供什么来使它成为一个更好的问题。我通常不会问这么广泛的问题，我通常会花时间实际学习如何做到这一点，但我被困住并试图为明天完成一些事情并且在这一点上非常沮丧。我已经在 J​​S 中使用了嵌套的 forEach 循环并使用 JQuery 输出了很多次，但我只是无法在 Vue 中弄清楚这个逻辑。提前致谢。

Answer 1

如果您像这样将其添加到您的data...

data: {
    items: Info
}

...然后您可以在模板中以items 的身份访问它。

由于您的数据有一些嵌套，这些任务将以items.Job.Tasks 的形式提供。这里用于访问属性的. 就像在任何其他 JavaScript 上下文中一样工作。同样，如果您需要，方括号符号也可以使用。

所以像v-for="task in items.Job.Tasks" 这样的东西会在你的任务上创建一个循环，并且会为每个项目创建一个名为task 的局部变量。这就像您使用 forEach 循环数组一样，例如items.Job.Tasks.forEach(task => {...}).

要完成子任务，您可以使用 v-for="subTask in task.SubTasks"。

一个完整的例子：

const Info = {
  "Job": {
    "JobId": "123",
    "Tasks": [{
        "TaskId": "1",
        "TaskName": "Test Task 1",
        "SubTasks": [{
            "SubTaskId": "1",
            "SubTaskName": "Test Sub Task 1"
          },
          {
            "SubTaskId": "2",
            "SubTaskName": "Test Sub Task 2"
          },
          {
            "SubTaskId": "3",
            "SubTaskName": "Test Sub Task 3"
          }
        ]
      },
      {
        "TaskId": "2",
        "TaskName": "Test Task 2",
        "SubTasks": [{
            "SubTaskId": "1",
            "SubTaskName": "Test Sub Task 1"
          },
          {
            "SubTaskId": "2",
            "SubTaskName": "Test Sub Task 2"
          },
          {
            "SubTaskId": "3",
            "SubTaskName": "Test Sub Task 3"
          }
        ]
      },
      {
        "TaskId": "3",
        "TaskName": "Test Task 3",
        "SubTasks": [{
            "SubTaskId": "1",
            "SubTaskName": "Test Sub Task 1"
          },
          {
            "SubTaskId": "2",
            "SubTaskName": "Test Sub Task 2"
          },
          {
            "SubTaskId": "3",
            "SubTaskName": "Test Sub Task 3"
          }
        ]
      }
    ]
  }
}

new Vue({
  el: "#ID1",
  data: {
    items: Info
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="ID1">
  <ul>
    <li v-for="task in items.Job.Tasks">
      {{ task.TaskId }} - {{ task.TaskName }}
      <ul>
        <li v-for="subTask in task.SubTasks">
          {{ subTask.SubTaskId }} - {{ subTask.SubTaskName }}
        </li>
      </ul>
    </li>
  </ul>
</div>