使用條件元件增強 Vuejs 模板

Question

我有一個不同事件的列表，如下所示，它被導入為 logTypes

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

對於這兩個事件，我有 2 個不同的元件。

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

在我的模板中，我有這個

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

一切工作正常，但我想讓它更具可讀性

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

#我想循環遍歷 logTypes 並在此基礎上選擇元件而不是 if 和 else？

任何幫助都會很棒。謝謝。

Answer 1

嘗試使用 LOGIN 和 LOGOUT 命名元件，如 logTypes 物件：

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

接著使用內建元件 component 並將 is 屬性綁定到 item.action ：