I am trying to pass an array from a parent to a child but render/output it in the child and not in the parent. In the tutorials which I found I am only able to render the array in the parent. So for example I have the following:
child
<template>
<div>
{{tile.name}} {{formattedPoints}}
</div>
</template>
<script>
export default {
props: {
tile: {
required: true,
type: Object
}
},
computed: {
formattedPoints() {
return this.tile[0].name = 5
}
}
}
</script>
parent
<template>
<div>
<User v-for="tile in tileMenu" :key="tile.id" :tile="tile" />
</div>
</template>
<script>
import User from './Home.vue'
import { ref } from 'vue'
export default {
components: {
User
},
setup() {
const tileMenu = ref([
{ id: 1, name: 'tile1' },
{ id: 2, name: 'tile2' },
])
return { tileMenu }
}
}
</script>
In this exapmle I would make the output with the parent but I like to have it with the child. In my thought process this should be possible because I pass the array anyway to the child component and if I call it like this
<template>
<div>
{{tile[0].name}}
</div>
</template>
it should give me the output with the child component. But that outputs nothing. How can I solve this issue? Thanks in advance
I can propose you that (and id need to be unique because it's your key in the for loop)
parent:
<template>
<div>
<User :tileMenu="tileMenu" /> <!--pass all array-->
</div>
</template>
<script>
import User from "./Home.vue";
const tileMenu = [
{ id: 1, name: "tile1NAME" },
{ id: 2, name: "tile2NAME" },
];
export default {
components: {
User,
},
data() {
return {
tileMenu: tileMenu,
};
},
};
</script>
child:
<template>
<div>
<div v-for="tile in tileMenuChild" :key="tile.id">
{{ tile.name }} with id {{ tile.id }}
</div>
</div>
</template>
<script>
export default {
props: {
tileMenu: Array,
},
data() {
return {
tileMenuChild: this.tileMenu,
};
},
};
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.