javascript - 如何使用 Vuetify 验证复选框组

Question

我的 Vue + Vuetify 项目中有一组复选框。我想使用 Vuetify 的 "Validation with submit & clear" 验证是否至少选中了一个复选框.

验证 radio 组很容易，并且通过将规则应用于 radio 组可以很好地工作:

<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"
      ];
    }
  }

这是 Codepen

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