vueでの定数とselect optionのためのselectOptionPlugin

contants.js

/**
 * 性別 - 定数
 */
export const SEX_TYPES = {
  MALE: '1',
  FEMALE: '2'
}

example.vue

<template>
<model-select :options="SEX_OPTIONS"
              v-model="query.sex"
              placeholder="select item">
</model-select>
</template>
<script>
import { SEX_TYPES } from '@/config/constants'

export default {
  data () {
    return {
      // SEX_OPTIONS: this.$toOptions(SEX_TYPES, (key) => this.$t(`model.user.sex.${key}`), true), // 検索用
      SEX_OPTIONS: this.$toOptions(SEX_TYPES, (key) => this.$t(`model.user.sex.${key}`)), // 入力用
    }
  }
}
</script>

messages.js

// vue i18n
export default {
  ja: {
    model: {
      user: {
        sex: {
          '1': '男性',
          '2': '女性'
        }
      }
    }
  }
}

selectOptionPlugin.js

// plugin登録コードは省略
const VueSelectOption = {
  install (Vue, options) {
    Vue.prototype.$toOptions = (constant, i18nHandler, includeBlank) => {
      options = []
      if (i18nHandler) {
        options = Object.entries(constant).map(entry => {
          return { value: entry[1], text: i18nHandler(entry[1]) }
        })
      } else {
        options = Object.entries(constant).map(entry => {
          return { value: entry[1], text: entry[0] }
        })
      }
      if (includeBlank) {
        return [{ value: '', text: '選択無し' }].concat(options)
      } else {
        return options
      }
    }
  }
}

export default VueSelectOption