使用條件元件增強 Vuejs 模板
P粉790819727
P粉790819727 2024-04-03 16:16:14
0
1
459

我有一個不同事件的列表,如下所示,它被導入為 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?

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

P粉790819727
P粉790819727

全部回覆(1)
P粉511757848

嘗試使用 LOGINLOGOUT 命名元件,如 logTypes 物件:

components:{
   LOGIN:LogTypeLogin ,
   LOGOUT:LogTypeLogout
}

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



熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板