我一直在搜索几个小时的简单示例,所以我来到了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中弄清楚这种逻辑。预先感谢。
答案 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>