Vuetifyのrulesで引数を設定する #Vue.js

Vuetifyのv-text-fieldなどでrulesに設定する関数は通常引数を与えることはできないが、ルール関数を返す関数を設定することで引数を与えることができる。

<template>
  <div>
    <!--10以上の数値を入力するフィールド-->
    <v-text-field
      :rules="[ruleMoreThan('10')]" />
    <!--20以上の数値を入力するフィールド-->
    <v-text-field
      :rules="[ruleMoreThan('20')]" />
  </div>
</template>

Scriptの記述。

const ruleMoreThan = (baseNumber: string) => {
  return (value: string) => 
    Number(value) > Number(baseNumber) || `${baseNumber}以上の数値を入力してください`
}