I am looking to create a dynamic list that displays data based on the selected key. The list will contain multiple items with different keys, and I want the flexibility to choose which data to display without hardcoding the actual key value.
<template>
<v-card
class="mx-auto"
max-width="500"
>
<v-list>
<v-list-item-group v-model="model">
<v-list-item
v-for="(item, i) in items"
:key="i"
>
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.data_to_display"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</template>
<script>
export default {
data: () => ({
data_to_display: 'name', // or data_to_display: 'text'
items: [
{
age: 34,
name: 'abc',
marks: null
},
{
age: 12,
name: '',
marks: 60
},
{
age: '20',
name: 'lmn',
marks: 70
},
],
model: 1,
}),
}
</script>
This list contains various keys such as name, age, and marks. By selecting a key from the script, I can dynamically choose which data to display on the list.