I have a component that renders text based on the users membership status and I want to change the interpolated text based on that prop value. Is there a more efficient way of showing different text based on the prop besides a bunch divs/p tags withv-if
or v-show
?
It's just a ton of text to constantly have a bunch of stacked divs.
Any advice would be appreciated!
Cheers!
<script lang="ts" setup>
import { PropType } from 'vue'
const props = defineProps({
kind: {
type: String as PropType<'subscribed' | 'unsubscribed'>,
default: 'subscribed',
},
planId: {
type: String as PropType<'standard' | 'silver' | 'gold' | 'platinum' | 'diamond' | 'no plan'>,
default: 'standard',
},
})
</script>
<template>
<div class="c-promotion-plan-card" data-cy="component-promotion-plan-card">
<div class="flex items-baseline mb-sm">
<div v-if="planId === 'standard'" class="text-h6 text-dark">Standard Gang</div>
<div v-if="planId === 'silver'" class="text-h6 text-dark">Silver Foxes</div>
<div v-if="planId === 'gold'" class="text-h6 text-dark">Golden Girls</div>
<div v-if="planId === 'platinum'" class="text-h6 text-dark">Platinum Boys</div>
<div v-if="planId === 'diamond'" class="text-h6 text-dark">Diamond Dudes</div>
<div v-if="planId === 'no plan'" class="text-h6 text-dark">
No Plan Posse
</div>
</div>
</div>
</template>