how to pass array of different values as props in vue - arrays

Question

everyone I hope everyone is doing great. I'm new to vue.js and was learning prop's which is pretty intersting. The thing is I want to pass an array as props and want to display it in the child component. here is my code
parent component
<template>
<div id="app">
<showProduct :product="['products']"/>
</div>
</template>
<script>
import showProduct from './components/showProduct.vue'
export default {
name: 'App',
components: {
showProduct
},
data(){
return{
products:[
{productid:"01",productname:"t shirt",price:"50$",description:"a good description"},
{productid:"02",productname:"jeans pant",price:"150$",description:"a good description of jeans"},
{productid:"02",productname:"leather jacker",price:"250$",description:"a good description of jacket"},
],
}
}
}
</script>
where as the child component code is given below
<template>
<h1>{{product}}</h1>
</template>
<script>
export default {
name:'showProduct',
props:[
'product'
],
methods:{
}
}
</script>
now I want to do the following:
Pass just a single element for instance product id as a 'props'.
Pass the whole array of products and display it in child components.
Any hint and suggestion will be welcomed.

Answer 1

Like this you will receive in the child component array of names, and index of the current item, so you can get just the name of the item in the child component.
Also don't forget to add unique key where you use v-for directive.
Like this you will receive in the child component array of names, and index of the current item, so you can get just the name of the item in the child component.
Also don't forget to add unique key where you use v-for directive.
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>
Output:
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