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

时间:2019-06-13 23:56:07

标签: javascript json vue.js

我一直在搜索几个小时的简单示例,所以我来到了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对象中)。

我尝试将“ Data”放入实例中,如下所示:

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

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

它在我可以访问对象(信息)的范围内起作用,但是在尝试使用v-for =“ Tasks中的Task”(例如)“属性或方法“ Tasks”时遇到错误未在实例上定义,而是在渲染过程中引用。通过初始化属性,确保该属性在data选项中或对基于类的组件都是反应性的。

我希望能够做到:

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

我知道那些方法无效,只想举个例子。

任何帮助都会对此表示赞赏。随意带我去Vue101。我不确定还有什么要问的或提供什么可以使它成为一个更好的问题。我通常不会问这么宽泛的问题,我通常会花时间来实际学习如何做到这一点,但是我被困住了,试图为明天做一些事情,并且此时感到非常沮丧。我在JS中使用了嵌套的forEach循环,并在JQuery上使用了无数次输出,但是我只是无法在Vue中弄清楚这种逻辑。预先感谢。

1 个答案:

答案 0 :(得分:0)

如果您这样将其添加到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>