What is the correct way to dynamically insert any number of sub components inside the main 'wrapper' component?
Something like this:
Main Parent component:
<template>
<div id="app">
<GridContainer v-for="item in items">
<GridItem />
</GridContainer>
</div>
</template>
<script>
import { GridContainer, GridItem } from 'Grid';
export default {
name: 'app',
components: {
GridContainer,
GridItem
},
data() {
return {
items: [...array if items that are dynamic]
};
};
}
</script>
do v-for on the component, not the wrapper. Like this
Your IDE may also warn you that you're missing a key, easiest way to add key is to use index (but it comes with some caveats). Also, you probably want to pass the items into the component. If you have a prop called item, you'd pass it with :item="item"
<template>
<div id="app">
<GridContainer>
<GridItem v-for="(item, k) in items" :key="k" :item="item"/>
</GridContainer>
</div>
</template>
<script>
import { GridContainer, GridItem } from 'Grid';
export default {
name: 'app',
components: {
GridContainer,
GridItem
},
data() {
return {
items: [...array if items that are dynamic]
};
};
}
</script>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments