Vuetifyのバリデーションルールの設定

data

email: '',
emailConfirm: '',
rules: {
  required: value => !!value || '必須項目です',
  email: value => {
    const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return pattern.test(value) || 'メールアドレスが間違っています'
  },
  emailMatch: value => value === this.email || 'メールアドレスが一致しません',
},

確認用のinputのrulesプロパティ

:rules="[rules.required, rules.emailMatch]"

これでうまくいけば良いけど、
コンポーネントの構造の問題なのかアロー関数のthis絡みのエラーが起きるケースがあった

Error in beforeMount hook: "TypeError: Cannot read property 'email' of undefined"

thisを使っているものをアローをやめてmethodsに移動すると解決

methods

emailMatchRule (value) {
  return value === this.email || 'メールアドレスが一致しません';
}

確認用のinputのrulesプロパティ

:rules="[rules.required, emailMatchRule]"