Une autre façon d'afficher du texte rendu conditionnellement basé sur des accessoires dans Vue ?

Question

J'ai un composant qui restitue le texte en fonction du statut d'adhésion de l'utilisateur et je souhaite modifier le texte interpolé en fonction de la valeur de cette propriété. Existe-t-il un moyen plus efficace d'afficher différents textes basés sur des accessoires autres que d'utiliser un tas de balises div/p avec v-if 或 v-show ?

Avoir constamment un tas de divs empilés avec seulement des tonnes de texte.

Toutes suggestions seraient grandement appréciées !

Bravo !

<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>

Answer 1

Oui, il existe une meilleure façon. Vous pouvez définir une propriété calculée comme Syntaxe 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
 }

Syntaxe 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,
 };
},

Appelez ensuite le calcul d'interpolation dans le modèle, par exemple

{{getLabel}}

Answer 2

Peut-être quelque chose comme l'extrait de code suivant (mapper votre plan et utiliser les propriétés calculées) :

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;
}

sssccc

  

    

      
{{ handlePlan.name }}