Tengo un componente que representa el texto en función del estado de membresía de los usuarios y quiero cambiar el texto interpolado en función de ese valor de utilería. ¿Existe una forma más eficiente de mostrar texto diferente basado en el accesorio además de un montón de etiquetas divs/p con v-if o v-show ?
Es solo una tonelada de texto tener constantemente un montón de divs apilados.
¡Cualquier consejo sería apreciado!
¡Salud!
<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>Sí, hay un mejor enfoque. Puede definir una propiedad calculada como la sintaxis de Vue2
computed: { getLabel() { // Assuming that 'planId' is the dependency prop if(this.planId === 'standard') return 'Standard Gang'; else if(this.planId === 'silver') return 'Silver Foxes'; .... return 'No Plan Posse' // For 'no plan' condition }Sintaxis de Vue3
setup(props) { // 1.getLabel depends on firstName,lastName. const getLabel = computed(() => { // Assuming that 'planId' is the dependency prop if(props.planId === 'standard') return 'Standard Gang'; else if(props.planId === 'silver') return 'Silver Foxes'; .... return 'No Plan Posse' // For 'no plan' condition }); return { getLabel, }; },y luego llame a esto calculado dentro de la interpolación dentro de su plantilla como
<div class="text-h6 text-dark">{{getLabel}}</div>Tal vez algo como el siguiente fragmento (haga un mapa de sus planes y use la propiedad calculada):
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>