在 Template 內使用 Enum | 點燈坊

實務上為了避免 Magic Number，會使用 Enum 增加可讀性，但在 HTML template 中卻無法直接使用 Enum。

Version

Vue 2.7

Enum

<template>
  <div>
    {{ BrandEnum.Apple }}
  </div>
</template>

<script>

const BrandEnum = {
  Apple: '0',
  Google: '1',
  Microsoft: '2'
}

export default {
  data: () => ({
    BrandEnum
  })
}
</script>

LIne 9

const BrandEnum = {
  Apple: '0',
  Google: '1',
  Microsoft: '2'
}

• 使用 const 定義 Enum 避免 0、1、2 等 Magic Number

Line 16

data: () => ({
  BrandEnum
})

• 將 Enum 也定義在 data 內

Line 2

<div>
  {{ BrandEnum.Apple }}
</div>

• 如此就可在 HTML template 使用 Enum

Conclusion

• 由於 HTML template 內只能直接使用定義在 data 的變數，因此只能在 data 內引用 Enum
• 為了讓 Enum 給多個 vue 檔使用，可將 Enum 定義在其他檔案，然後 import 進 vue 內