search

Home  >  Q&A  >  body text

Enhancing Vuejs templates with conditional components

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.

P粉790819727P粉790819727238 days ago445

reply all(1)I'll reply

  • P粉511757848

    P粉5117578482024-04-04 10:39:01

    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:

    
    
    

    reply
    0
  • Cancelreply