web-dev-qa-db-ja.com

Vuetifyでチェックボックスグループを検証する方法

Vue + Vuetifyプロジェクトにチェックボックスのグループがあります。少なくとも1つのチェックボックスがVuetifyの "submit＆clearによる検証" を使用してチェックされていることを確認したいと思います。

ラジオグループの検証は簡単で、ラジオグループにルールを適用することで問題なく機能します。

<v-radio-group v-model="radio" required :rules="radioRules" row>
    <v-radio label="A" value="a"></v-radio>
    <v-radio label="B" value="b"></v-radio>
    <v-radio label="C" value="c"></v-radio>
</v-radio-group>

問題：

残念ながら、チェックボックスの場合、v-checkbox-groupのようなグループオプションが見つからないため、チェックボックスは次のようになります。

<v-checkbox class="pr-6" v-model="selected" label="A" value="a"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected" label="B" value="b"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected" label="C" value="c"></v-checkbox>

質問：

少なくとも1つのチェックボックスthis.selected.length > 0がチェックされていることを検証するルールをチェックボックスに適用するにはどうすればよいですか？

ご協力いただきありがとうございます！

javascriptvue.jsvuejs2vuetify.js
6
Lucien Chardon

モデルのselectedフィールドを配列に定義して、以下のようにチェックボックスをバインドしないのですか？

<v-checkbox class="pr-6" v-model="selected[0]" label="A" value="a"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected[1]" label="B" value="b"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected[2]" label="C" value="c"></v-checkbox>

検証用：

return this.selected.fitler(s => s === true).length > 0
1
Ali Bahrami