const { ref, computed } = Vue
const app = Vue.createApp({
props: {
kind: {
type: String,
default: 'subscribed',
},
planId: {
type: String,
default: 'standard',
},
},
setup(props) {
const plans = ref([{plan:'standard', name: 'Standard Gang'}, {plan:'silver', name: 'Silver Foxes'}, {plan:'gold', name: 'Golden Girls'}, {plan:'platinum', name: 'Platinum Boys'}, {plan:'diamond', name: 'Diamond Dudes'}, {plan: 'no plan', name: 'No Plan Posse'}])
const handlePlan = computed(() => plans.value.find(p => p.plan === props.planId))
return { plans, handlePlan }
},
})
app.mount('#demo')
.style-class {
color: red;
font-size: 2em;
}
.other-style {
color: blue;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="c-promotion-plan-card" data-cy="component-promotion-plan-card">
<div class="flex items-baseline mb-sm">
<div class="text-h6 text-dark" :class="handlePlan.plan === 'standard' ? 'style-class' : 'other-style'">{{ handlePlan.name }}</div>
</div>
</div>
</div>