我有一個不同事件的列表,如下所示,它被導入為 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?
任何幫助都會很棒。謝謝。
嘗試使用
LOGIN和LOGOUT命名元件,如logTypes物件:components:{ LOGIN:LogTypeLogin , LOGOUT:LogTypeLogout }接著使用內建元件
component並將is屬性綁定到item.action: