Trying to pass props from a component element that includes a slot
PatientBooking.vue
<user-profile :titlename="BOOKINGDETAIL">
<div class="block">
<div>Ereferral: 84884jjd</div>
<div>Gender: Male</div>
<div>Height: 84</div>
</div>
</user-profile>
UserProfile.vue
<div class="block">
<div class="block">
<template v-if="titlename == 'BOOKINGDETAIL'">BOOKING DETAIL</template>
<template v-else-if="titlename == 'BOOKING'">BOOKING</template>
<template v-else>RESULT DETAIL</template>
</div>
<div class="block">
<slot></slot>
</div>
</div>
export default {
name: "UserProfile",
props: {
titlename: {
type: String,
default: ""
}
}
}
When binding the user-profile component with titlename props, it always defaults to an empty string and displays RESULT DETAIL. Need assistance in solving this issue.