Vueテンプレートにヘルパー関数を追加する方法

WEB制作
Vueテンプレートにヘルパー関数を追加する方法

Vueを使っている場合にバリデーションやテキストフォーマットの変更などの関数が複数のテンプレートで何度も必要になることがあります。それらの関数をヘルパー関数として共通化する方法をご紹介します。

目次

ヘルパー関数の作成

まずはじめにhelpers.jsとして、ヘルパー関数を作成します。

export default {
    nl2br: function (str) {
        return str.replace(/\n/g, '<br/>');
    },
    isString: function (v) {
        return typeof v === 'string';
    },
}

ヘルパー関数の設定

ヘルパー関数をプラグインとしてVueに登録します。

import Vue from 'vue'
import helpers from './helpers'

const plugin = {
    install () {
        Vue.prototype.$helpers = helpers
    }
}

Vue.use(plugin)

Vueテンプレートでの呼び出し方

this.$helpers.nl2br('foo')

特定のテンプレートのみに追加する場合

特定のテンプレートのみにヘルパー関数を追加する場合は、Vueテンプレートに下記のように記述します。

import helperMethods from './helpers'

export default {
    methods: {
        ...helperMethods
    }
}

Vueテンプレートでの呼び出し方

this.nl2br('foo')