I am working on a child component that utilizes v-for to loop through data. Below is the code for the child component:
<template>
<div>
<ul>
<li v-for="item in listItems"
:key=item.id>
<span>{{item.name}} - {{item.color}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
listItems: Array
}
};
</script>
listItems stores an array of objects.
The challenge I'm facing is how to make the property names dynamic between the <span> tags from the parent component. Depending on the array of objects passed as listItems, there are times when I need the text within the <span> tags to vary based on the object properties in the array. For instance:
<span>{{item.id}} - {{item.location}}</span>