Amélioration des modèles Vuejs avec des composants conditionnels

Question

J'ai une liste de différents événements comme indiqué ci-dessous, elle est importée sous logTypes

export default {
  LOGIN: "login",
  LOGOUT: "logout",
}

Pour ces deux événements j'ai 2 volets différents.

<LogTypeLogin :item="item" />
<LogTypeLogout :item="item" />

Dans mon modèle, j'ai ceci

<template #item.event="{ item }">
  <div v-else-if="item.action === logTypes.LOGIN">
     <LogTypeLogin :item="item" />
  </div>
  <div v-else-if="item.action === logTypes.LOGOUT">
     <LogTypeLogout :item="item" />
  </div>
  <div v-else>
    Nothing
  </div>
</template>

Tout fonctionne bien, mais je veux le rendre plus lisible

à <template #item.event="{ item }">

Je veux parcourir logTypes et sélectionner le composant en fonction de cela au lieu de si et d'autre ?

Toute aide serait formidable. Merci.

Answer 1

Essayez d'utiliser LOGIN 和 LOGOUT 命名组件，如 logTypes Objet :

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

Ensuite, utilisez le composant intégré component 并将 is 属性绑定到 item.action :