如何将 Vue.js 与 json 数组一起使用 - 简单示例
How can I use Vue.js with json array - simple example
我花了好几个小时来寻找一个简单的例子,所以我来到 SO 社区寻求帮助。
如果我有一个 json 对象(外部,假设我们以 "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"
}
]
}
]
}
}
如何在 Vue 实例中访问它并访问嵌套数组?我能找到的每个例子都在我的脑海中,或者看起来像下面这样:
new Vue({
el: "ID1",
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
但是我已经知道如何使用 v-for 从实例中已有的数组中获取数据(我的意思是硬编码),尽管嵌套数组仍然让我有些困惑,但我不能如果数组和嵌套数组在 json 对象 w/arrays.
中,我想出了一个直接的方法来访问它们
我试过按如下方式将 "Data" 放入实例中以获取对象:
new Vue({
el: "ID1",
data: Info
})
或
new Vue({
el: "ID1",
data: {
items: Info,
/// extra stuff here
}
})
它在我可以访问对象 (Info) 的范围内工作,但是我 运行 在尝试使用 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。我不确定还要问什么或提供什么才能使它成为一个更好的问题。我通常不会问这么宽泛的问题,我通常会花时间实际学习如何做到这一点,但我被困住了并试图为明天完成一些事情并且在这一点上非常沮丧。我在 JS 中使用了嵌套的 forEach 循环并输出了 JQuery 很多次,但我就是无法在 Vue 中弄清楚这个逻辑。提前致谢。
如果像这样将它添加到 data
...
data: {
items: Info
}
...然后您将在模板中以 items
的形式访问它。
由于您的数据有一些嵌套,任务将以 items.Job.Tasks
的形式提供。这里用于访问属性的 .
就像在任何其他 JavaScript 上下文中一样工作。同样,如果您需要,也可以使用方括号表示法。
所以像 v-for="task in items.Job.Tasks"
这样的东西会在你的任务上创建一个循环,并且会为每个项目创建一个名为 task
的局部变量。这就像您使用 forEach
遍历数组一样,例如items.Job.Tasks.forEach(task => {...})
.
要到达 sub-tasks,您需要使用 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>
我花了好几个小时来寻找一个简单的例子,所以我来到 SO 社区寻求帮助。
如果我有一个 json 对象(外部,假设我们以 "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"
}
]
}
]
}
}
如何在 Vue 实例中访问它并访问嵌套数组?我能找到的每个例子都在我的脑海中,或者看起来像下面这样:
new Vue({
el: "ID1",
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
但是我已经知道如何使用 v-for 从实例中已有的数组中获取数据(我的意思是硬编码),尽管嵌套数组仍然让我有些困惑,但我不能如果数组和嵌套数组在 json 对象 w/arrays.
中,我想出了一个直接的方法来访问它们我试过按如下方式将 "Data" 放入实例中以获取对象:
new Vue({
el: "ID1",
data: Info
})
或
new Vue({
el: "ID1",
data: {
items: Info,
/// extra stuff here
}
})
它在我可以访问对象 (Info) 的范围内工作,但是我 运行 在尝试使用 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。我不确定还要问什么或提供什么才能使它成为一个更好的问题。我通常不会问这么宽泛的问题,我通常会花时间实际学习如何做到这一点,但我被困住了并试图为明天完成一些事情并且在这一点上非常沮丧。我在 JS 中使用了嵌套的 forEach 循环并输出了 JQuery 很多次,但我就是无法在 Vue 中弄清楚这个逻辑。提前致谢。
如果像这样将它添加到 data
...
data: {
items: Info
}
...然后您将在模板中以 items
的形式访问它。
由于您的数据有一些嵌套,任务将以 items.Job.Tasks
的形式提供。这里用于访问属性的 .
就像在任何其他 JavaScript 上下文中一样工作。同样,如果您需要,也可以使用方括号表示法。
所以像 v-for="task in items.Job.Tasks"
这样的东西会在你的任务上创建一个循环,并且会为每个项目创建一个名为 task
的局部变量。这就像您使用 forEach
遍历数组一样,例如items.Job.Tasks.forEach(task => {...})
.
要到达 sub-tasks,您需要使用 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>