如何用Vuetify验证复选框组

Question

在我的Vue + Vuetify项目中有一组复选框。我想验证一下，至少有一个复选框是使用Vuetify的“提交和清除的验证”选中的。

验证无线电组很容易，通过对无线电组应用规则可以很好地工作：

<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>

问题：

如何将规则应用于验证至少选中一个复选框的复选框，this.selected.length > 0？

谢谢你的帮忙!

Answer 1

它可以通过数组作为v-model来完成。只需使用计算属性进行验证：

computed: {
    rules() {
      return [
        this.selected.length > 0 || "At least one item should be selected"
      ];
    }
  }

这是科德芬

还要注意如何使用hide-details属性的v-checkbox。

Answer 2

为什么不将模型的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.filter(s => s === true).length > 0