如何使用 Vuetify 验证复选框组

Posted 2023-02-22

【中文标题】如何使用 Vuetify 验证复选框组

【英文标题】：How to validate checkbox group with Vuetify

【发布时间】：2020-01-05 08:23:43

【问题描述】：

我的 Vue + Vuetify 项目中有一组复选框。我想验证使用 Vuetify 的 "Validation with 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>

问题：

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

感谢您的帮助！

【问题讨论】：

rules="required" 可以在这里工作。

这将需要选中所有复选框，我希望至少需要选中一个复选框。

【参考方案1】：

为什么不将模型的 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

【参考方案2】：

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

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

这里是Codepen

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

【讨论】：

效果很好。如果您的列表是动态的，您需要在 v-for 中使用 index，然后在 hide-details 中使用它，以隐藏除最后一个以外的所有位置，如下所示：:hide-details="index != options.长度 - 1"