One way to accomplish this is by utilizing a for loop along with component props
For instance
Splitting into two files:
- Start with the Parent component, like FruitComponent.vue
<template>
<fruit-list v-for:"fruitTitle in fruitsList" :title="fruitTitle"></fruit-list>
</template>
<script>
export default{
data () {
return {
fruitsList: ["apple", "banana", "orange"]
}
}
</script>
- Then, create the Child component, e.g. FruitItem.vue
<template>
<h3>{{fruitTitle}}</h3>
</template>
<script>
export default{
props: {fruitTitle : String}
}
</script>
Alternatively, for simpler scenarios
(Recommended only for very small components where placing child component HTML directly into the parent's "template" attribute is acceptable. Consider creating a separate file for cleaner structure)
- Including the Parent component code
<div id="fruits-component">
<ol>
<fruits-list v-for="fruit in fruitsItems" :fruits-item="fruit"></fruits-list>
</ol>
</div>
- Create the dynamic rendering Child component
Vue.component('fruits-list', {
props: ['fruitsItem'],
template: '<h3>{{fruitsItem.value}}</h3>'
});
- Add the child component to the fruits-component
new Vue({
el: '#fruits-component',
data: {
fruitsItems: [
{value: 'apple'},
{value: 'orange'}
]
}
});