Enhancing Vuejs templates with conditional components

Question

I have a list of different events as shown below, it is imported as logTypes

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

For these two events, I have 2 different components.

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

In my template I have this

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

Everything is working fine, but I want to make it more readable

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

I want to loop through logTypes and select the component based on that instead of if and else?

Any help would be great. Thanks.

Answer 1

Try using LOGIN and LOGOUT named components like logTypes Object:

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

Then use the built-in component component and bind the is property to item.action: