I'm struggling to understand how to transfer the v-slot data into a component.
Suppose I want to restructure the code below:
<template v-slot:item="data">
<template v-if="typeof data.item !== 'object'">
<v-list-item-content v-text="data.item"></v-list-item-content>
</template>
<template v-else>
<v-list-item-avatar>
<img :src="data.item.avatar">
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-html="data.item.name"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.group"></v-list-item-subtitle>
</v-list-item-content>
</template>
How can I move the data into a new component? I attempted using props, but the component wasn't displayed:
<ListElementAvatar
:item="data.item"
:imgSrc="data.item.avatar"
:title="data.item.name"
:subtitle="data.item.group"
:source="data" />
ListElementAvatar:
<template>
<div>
<template v-if="typeof item !== 'object'">
<v-list-item-content :v-text="item"></v-list-item-content>
</template>
<template v-else>
<ListItemAvatar :imgSrc="imgSrc" />
<v-list-item-content>
<v-list-item-title :v-html="title"></v-list-item-title>
<v-list-item-subtitle :v-html="subtitle"></v-list-item-subtitle>
</v-list-item-content>
</template>
</div>
</template>
<script>
export default {
name: "ListElementAvatar",
props: {
item: {
type: Object,
default: () => {},
},
imgSrc: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
subtitle: {
type: String,
default: '',
},
source: {
type: Object,
default: () => {},
},
},
};
</script>
My Goal:
I aim to refactor the code by creating smaller components. The initial code should be encapsulated within a Vue component named ListElementAvatar. This way, it can be easily reused in the future. Instead of repeating the long code from the first listing, I would simply call this custom component.
Reference: https://codepen.io/thadeuszlay/pen/gOYevRZ?editors=1010