Reputation: 711
I have the below parent and child components. In the parent I am using obj.Array
with v-for
to list multiple children components. The issue is that stuff1
and stuff2
will be the same for each child but I need to grab each element of obj.array
for each child. What is the correct way to do this? Thanks
Parent:
<template>
<div>
<child v-bind:obj="obj" v-for="(arrVal, index) in obj.array" :id="index" :key="arrVal"/>
</div>
</template>
<script>
export default {
data() {
return {
obj: { stuff1: "str1", stuff2: "str2", array: ["arrVal1", "arrVal2", "arrVal3"] }
};
}
};
</script>
Child:
<template>
<div>
<p>{{obj.stuff1}}</p>
<p>------</p>
<p>{{obj.stuff2}}</p>
<p>------</p>
<p>{{obj.array[index]}}</p>
</div>
</template>
<script>
export default {
props: { obj: Object }
};
</script>
What I would like to render:
str1 ------ str2 ------ arrVal1
str1 ------ str2 ------ arrVal2
str1 ------ str2 ------ arrVal2
Upvotes: 1
Views: 1397
Reputation: 5048
try this:
<template>
<div v-for="val in obj.array">
<p>{{obj.stuff1}}</p>
<p>------</p>
<p>{{obj.stuff2}}</p>
<p>------</p>
<p>{{val}}</p>
</div>
</template>
<script>
export default {
props: { obj: Object }
};
</script>
What I am suggesting is just to iterate over the array in the child component.
Upvotes: 1