Vueで自前のUtil関数をテンプレートで使う
Vueやってると出てくる、Util関数をテンプレートで呼びたい問題。
何が問題かというと・・・順番に見ていきましょう。
問題
まずはこんな関数を定義。
日付表記をYYYY/MM/DDにするだけの関数です。
import dayjs from 'dayjs' export function formatDate(date) { return dayjs(date).format('YYYY/MM/DD') }
さて、これを他のファイルで使いたい。。。
Vueのスクリプト部分だと単純にimportして使えば良いんですが、テンプレートで使いたいとなると、
一旦メソッド作るしかなくて、「あれ、Utilの意味・・・」となりがちです。
<table> <thead> <th>名前</th> <th>作成日</th> </thead> <tbody> <tr v-for="data in dataList"> <td>{{ data.name }}</td> <td>{{ formatDate(data.insert_date) }}</td> </tr> </dbody> </teble>
import { formatDate } from 'util' export default { name: 'Foo', methods: { formatDate(date) { return formatDate(date) } } }
意味ないやんこれ。。。
解決
UtilをプラグインとしてVueに登録してやりましょう。
import dayjs from 'dayjs' export function formatDate(date) { return dayjs(date).format('YYYY/MM/DD') } export default { formatDate }
import Util from 'util' const myUtil = { install(Vue, options) { Vue.prototype.$myUtil = Util } } Vue.use(myUtil) new Vue({ // ... })
これで、this.$myUtil.dateFormat
で使えます。
さっきのコードはこれだけで良く、script部分からはimportもわざわざmethod作る必要もないです。
<table> <thead> <th>名前</th> <th>作成日</th> </thead> <tbody> <tr v-for="data in dataList"> <td>{{ data.name }}</td> <td>{{ $myUtil.formatDate(data.insert_date) }}</td> </tr> </dbody> </teble>
もっと良い解決方法あればいいけど・・・。
prototypeにぶち込むので、できるだけ被らない名前にしないとなーとぐらいは思いました。