VeeValidateでカスタマイズしたエラー文言に項目名を使用する方法

備忘録。

エラー文言に項目名を使用する

plugin/veeValidate.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'

const dictionary = {
  ja: {
    messages: {
      required (n) {
        return n + 'は必須項目です'
      }
    }
  }
}

Validator.localize(dictionary)
Vue.use(VeeValidate, Validator)

.vueのtemplate側では次のように、data-vv-asを指定する。

<input
  v-model="email"
  v-validate="'required'"
  data-vv-validate-on="blur"
  data-vv-as="メールアドレス"
  type="text"
  name="email"/>

エラー文言にmax、minの数値を使用する

plugin/veeValidate.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'

const dictionary = {
  ja: {
    messages: {
      max(n, e) {
        return n + 'は' + e[0] + '文字以内で入力してください'
      }
    }
  }
}

Validator.localize(dictionary)
Vue.use(VeeValidate, Validator)

<input
  v-model="password"
  v-validate="'required|max:16'"
  data-vv-validate-on="blur"
  data-vv-as="パスワード"
  type="password"
  name="password"/>