Can the key value be displayed in the component when passing it in the list?
The data is structured like this:
{ id: 1, title: "test", text: "Lorem ipsum doloret imes", date: "20-01-2020" },
{ id: 2, title: "tes", text: "Lorem ipsum doloret imes", date: "20-01-2020" },
{ id: 3, title: "est", text: "Lorem ipsum doloret imes", date: "20-01-2020" },
I want to show the id in the child component:
<single-news-template v-for="m in data"
v-bind:key="m.id"
v-bind:title="m.title"
v-bind:text="m.text"
v-bind:date="m.date">
</single-news-template>
This is the component code:
<v-list-item dense
>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">{{key}}</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title><a href="">{{title}}</a></v-list-item-title>
<v-list-item-subtitle>[...]{{text}}[...]</v-list-item-subtitle>
<v-list-item-subtitle>{{date}}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<script>
export default {
name: "SingleNewsTemplate",
props: ["key","title", "text", "date"]
}
</script>
However, the key does not appear in the avatar item.