vee-validate 個数で制御（enable/disable）

 以下の記事はアメブロで2023-03-16に投稿したものです。

vue-nuxt、vee-validateのV3の環境で

ボタンenable/disableを設定項目が１個以上かどうかで切り替えたい画面があった。

vee-validateには他の項目と連動させる機能があるのだが、どうにも使いづらい。

というかできるのかどうかもよく分からなかった。

なので結局、カスタムルールを作成し、computedで個数を取得して、それをrulesのカスタムルールのパラメータとして渡すことで解決した。

本来の機能でやった方が良いかもしれないが、こういうやり方もあるということでこちらに書くことにした。

xxxx.vue

validation-provider(:immediate="true" vid="enabled" :rules="`XXXX_exist:${xxxxNums}`" v-slot="{errors}" name="XXXXの利用設定")

computed: {

  xxxxNums: {

    get () {

      return this.xxxx.length

    },

  },

plugins/validation.js

extend(

  'xxxx_exist',

  {

    message: (field) => { return field + 'には〇○〇○が必要です。' },

    params: ['num'],

    validate: (enabled, { num }) => {

      return !enabled || parseInt(num)

    },

  },

)

「利用しない」場合、enabledはfalse

利用する／利用しない

というボタンで、ステータス切り替えを行うタイミングで

ある項目が設定されているかチェックして、

更新ボタン

をenable/disableする。

このある項目は追加、削除で個数が上下する、という画面。

もちろん０個もあるので、この場合、この項目を保持していた配列の要素数も0になる。