I have a set of data that returns labels, and I need to use this data to create a component.
The component is already constructed when passing the values. Now, I aim to use a for loop to continuously add entries and generate components as required.
This is my attempt:
data() {
return {
options: [{
heading: 'Welcome to the Card',
subheading: 'Manage your Profile here'
},
{
heading: 'Pay your bills',
subheading: 'Manage your bills and payments here'
}
]
}
}
I am attempting to iterate through it like so:
<div v-for="(value, key) in options">
<componentName {{key}} = {{value}}/>
</div>
Previously, the above code looked like this:
<componentName :heading='Welcome to the Card' :subheading='Manage your Profile here'/>
While this method works fine, I need to recreate <componentName each time I want to add more entries, which I'd like to avoid. Instead, I want to maintain one entry and feed it an array of objects.
I'm using Vue2. What could be the issue with my approach?