如何将 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"

            }

            ]

        },   

        {

     

如何在 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" 之类的东西时遇到错误（例如）“未定义属性或方法“任务”在实例上，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件”。

我希望能够做到：

<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。我不知道还有什么要问或提供什么才能使它成为一个更好的问题。我通常不会问这么宽泛的问题，我通常会花时间实际学习如何做到这一点，但我被困住了，试图为明天完成一些事情，并且在这一点上非常沮丧。我在 JS 中使用了嵌套的 forEach 循环并用 JQuery 输出了很多次，但我无法在 Vue 中弄清楚这个逻辑。提前致谢。