将数组传递给 Vuejs 中的道具
Passing an array to a prop in Vuejs
我将一个值列表从一个父组件传递给它的子组件,我想接收所有的值,但我只接收到最后一个。
这是父组件的代码:
<app-spider-web
v-for="skill in skills"
:name="skill.name"
:required="skill.required"
:vMode1="skill.vMode1"
></app-spider-web>
...
skills: [
{
name: 'Frozen Yogurt',
required: 1,
vMode1: ''
},
{
name: 'Ice cream sandwich',
required: 3,
vMode1: ''
},
{
name: 'Eclair',
required: 1,
vMode1: ''
}
]
这是子组件的代码:
props:['name','required','vMode1']
这样我一个一个地接收数据,如果我想打印例如 'name' 它只显示列表中的姓氏 'Eclair' 而我想要一个数组包含所有名称的子组件。最好的方法是什么?
像这样你会在子组件中接收到名称数组,以及当前项的索引,这样你就可以在子组件中只获取项的名称。
另外不要忘记在使用 v-for 指令的地方添加唯一的 key。
Parent.vue
<template>
<div>
<child
v-for="(skill, index) in skills.length"
:key="skill.name"
:index="index"
:names-array="skills.map(a => a.name)"
/>
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Parent',
components: {
Child
},
data () {
return {
skills: [
{
name: 'Frozen Yogurt',
required: 1,
vMode1: ''
},
{
name: 'Ice cream sandwich',
required: 3,
vMode1: ''
},
{
name: 'Eclair',
required: 1,
vMode1: ''
}
]
}
}
}
</script>
Child.vue
<template>
<div>
<div>Index: {{ index }}</div>
<div>Names Array: {{ namesArray }}</div>
<div>Name: {{ namesArray[index] }}</div>
</div>
</template>
<script>
export default {
name: "Child",
props: ["names-array", "index"]
};
</script>
输出:
Index: 0 Names Array: [ "Frozen Yogurt", "Ice cream sandwich",
"Eclair" ] Name: Frozen Yogurt
Index: 1 Names Array: [ "Frozen Yogurt", "Ice cream sandwich",
"Eclair" ] Name: Ice cream sandwich
Index: 2 Names Array: [ "Frozen Yogurt", "Ice cream sandwich",
"Eclair" ] Name: Eclair
我将一个值列表从一个父组件传递给它的子组件,我想接收所有的值,但我只接收到最后一个。
这是父组件的代码:
<app-spider-web
v-for="skill in skills"
:name="skill.name"
:required="skill.required"
:vMode1="skill.vMode1"
></app-spider-web>
...
skills: [
{
name: 'Frozen Yogurt',
required: 1,
vMode1: ''
},
{
name: 'Ice cream sandwich',
required: 3,
vMode1: ''
},
{
name: 'Eclair',
required: 1,
vMode1: ''
}
]
这是子组件的代码:
props:['name','required','vMode1']
这样我一个一个地接收数据,如果我想打印例如 'name' 它只显示列表中的姓氏 'Eclair' 而我想要一个数组包含所有名称的子组件。最好的方法是什么?
像这样你会在子组件中接收到名称数组,以及当前项的索引,这样你就可以在子组件中只获取项的名称。
另外不要忘记在使用 v-for 指令的地方添加唯一的 key。
Parent.vue
<template>
<div>
<child
v-for="(skill, index) in skills.length"
:key="skill.name"
:index="index"
:names-array="skills.map(a => a.name)"
/>
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Parent',
components: {
Child
},
data () {
return {
skills: [
{
name: 'Frozen Yogurt',
required: 1,
vMode1: ''
},
{
name: 'Ice cream sandwich',
required: 3,
vMode1: ''
},
{
name: 'Eclair',
required: 1,
vMode1: ''
}
]
}
}
}
</script>
Child.vue
<template>
<div>
<div>Index: {{ index }}</div>
<div>Names Array: {{ namesArray }}</div>
<div>Name: {{ namesArray[index] }}</div>
</div>
</template>
<script>
export default {
name: "Child",
props: ["names-array", "index"]
};
</script>
输出:
Index: 0 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Frozen Yogurt
Index: 1 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Ice cream sandwich
Index: 2 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Eclair