Vuetifyのv-checkboxで最低一つ選択必須にするバリデーションの実装

はじめに

Vuetify でフォームを作ったときに v-checkbox を使いました。
チェックボックスを最低 1 つ選択必須にするバリデーションを掛けようとしたときに苦戦しましたので、バリデーションの方法について書きます。

個人的にいまいちだった方法

stack overflow のHow to validate checkbox group with Vuetifyにあった回答を参考にして、バリデーションを作りました。

チェックボックスを１つも選択していないときに、エラーメッセージが全てのチェックボックスに表示されてしまいます。
見た目がいまいち…！エラーメッセージは１つだけにしたい…！

バリデーション実装その１

v-checkboxのhide-detailsを最後のチェックボックスのみfalse（他はtrue）にしています。
最後のチェックボックスかどうかの判断はisLastFruitメソッドでしています。

この方法はシンプルですが、最後のチェックボックスがdisabledになっている場合に、エラーメッセージの色が赤にならないのが微妙なポイントでした。（disabledを使わない場合は、この方法が良さそうです。）

バリデーション実装その２

v-checkboxのhide-detailsをtrueにして、チェックボックスのエラーメッセージを非表示にしています。
選択したチェックボックスの値を入れているselectedValuesが空のとき、v-showで条件分岐してエラーメッセージが表示されるようにしています。