🔖

vuelidateのparamが取得できない

2023/09/11に公開

やりたいこと

カスタムバリデータのエラーメッセージに「○桁で入力してください」などの表示にしたいがparamに指定した桁数が取得できない。

原因・解消方法

importに誤りがあった

下記ではNGなので
import { helpers } from 'vuelidate/lib/validators';
こちらに書き換えで解消
import { helpers } from '@vuelidate/validators';

lib/validatorsではデフォルトのバリデータのparamは取得できるようだが、カスタムバリデータはだめなよう。

scripts/validation.ts
カスタムバリデータにhelpers.withParamsでparaを設定

export const maxDecimalPlaces = (param: number) =>
  helpers.withParams(
    { type: 'maxDecimalPlaces', max: param },
    (value: number | Ref<number>) =>
      !helpers.req(value) || decimalPlaces(unref(value)) <= param
  );

下記記載でエラーメッセージ内にparamを埋め込み

Discussion