在 Vue3 中传递对象数组并循环遍历它的正确语法是什么
What is the proper syntax for passing an array of objects and looping through it in Vue3
我正在尝试创建以下功能
1 个问题数组在 vue link 中作为道具传递,就像这样
<router-link
:to="{
name: 'finder_step',
params: {
id: 2,
questions: [
{
id: 'q1',
body: 'one'
},
{
id: 'q2',
body: 'two'
}
]
}
}"
>
Step 2
</router-link>
其中 questions 属性是一个对象数组,其中包含一个 id 和正文文本。但是,我遇到的问题是我的输出变成 [ "[object Object]", "[object Object]" ]
我的理解是我的对象在某个时刻被转换成一个字符串。我不明白的是为什么,以及我需要使用的正确语法是什么。
下面是我如何在 vue 文件中遍历我的数组。
<template>
<div>
<p>ID: {{ id }}</p>
<p>Question: {{ questions }}</p>
<li
v-for="question in questions"
:key="question.id"
>
{{ question.body }}
</li>
</div>
</template>
<script>
export default {
props: {
id: { type: String, default: '' },
questions: {
type: Array,
id: String,
body: String
}
}
}
</script>
路由参数旨在成为 dynamic path parameters, so Vue Router automatically encodes them 的路由 URL 中的字符串。
一种解决方法是对任何不是 strings/numbers 的参数使用 JSON.stringify
(即,在这种情况下为 questions
):
<router-link
:to="{
name: 'finder_step',
params: {
id: 2,
questions: JSON.stringify([
{
id: 'q1',
body: 'one'
},
{
id: 'q2',
body: 'two'
}
])
}
}"
>
Step 2
</router-link>
然后JSON.parse
the prop in your component as a computed property:
export default {
props: {
questions: Array
},
computed: {
computedQuestions() {
if (typeof this.questions === 'string') {
return JSON.parse(this.questions)
} else {
return this.questions
}
}
}
}
并在模板中使用计算属性:
<ul>
<li
v-for="question in computedQuestions"
:key="question.id"
>
{{ question.body }}
</li>
</ul>
我正在尝试创建以下功能
1 个问题数组在 vue link 中作为道具传递,就像这样
<router-link
:to="{
name: 'finder_step',
params: {
id: 2,
questions: [
{
id: 'q1',
body: 'one'
},
{
id: 'q2',
body: 'two'
}
]
}
}"
>
Step 2
</router-link>
其中 questions 属性是一个对象数组,其中包含一个 id 和正文文本。但是,我遇到的问题是我的输出变成 [ "[object Object]", "[object Object]" ]
我的理解是我的对象在某个时刻被转换成一个字符串。我不明白的是为什么,以及我需要使用的正确语法是什么。
下面是我如何在 vue 文件中遍历我的数组。
<template>
<div>
<p>ID: {{ id }}</p>
<p>Question: {{ questions }}</p>
<li
v-for="question in questions"
:key="question.id"
>
{{ question.body }}
</li>
</div>
</template>
<script>
export default {
props: {
id: { type: String, default: '' },
questions: {
type: Array,
id: String,
body: String
}
}
}
</script>
路由参数旨在成为 dynamic path parameters, so Vue Router automatically encodes them 的路由 URL 中的字符串。
一种解决方法是对任何不是 strings/numbers 的参数使用 JSON.stringify
(即,在这种情况下为 questions
):
<router-link
:to="{
name: 'finder_step',
params: {
id: 2,
questions: JSON.stringify([
{
id: 'q1',
body: 'one'
},
{
id: 'q2',
body: 'two'
}
])
}
}"
>
Step 2
</router-link>
然后JSON.parse
the prop in your component as a computed property:
export default {
props: {
questions: Array
},
computed: {
computedQuestions() {
if (typeof this.questions === 'string') {
return JSON.parse(this.questions)
} else {
return this.questions
}
}
}
}
并在模板中使用计算属性:
<ul>
<li
v-for="question in computedQuestions"
:key="question.id"
>
{{ question.body }}
</li>
</ul>