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

Problem:

不幸的是,对于复选框,我找不到像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>

Question:

如何对复选框应用规则,以验证至少选中了一个复选框,即this.selected.length > 0

谢谢你的帮助!

推荐答案

它可以用v-model的数组来完成.只需使用computed属性进行验证:

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

这是Codepen美元

还要注意v-checkboxhide-details属性是如何使用的.

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现?

如何将外部 svg 转换为 Vue3 组件?

vue : 多个样式的类绑定在一个

Vue 3 范围滑块中的多个值

如何容器化 Vue.js 应用程序?

Vuex 和 Event Bus 有什么区别?

vuejs vue-cli 如何使用 console.log 而不会出现任何错误

在 VueJS 中存储图像的正确位置是什么 - 公共文件夹或assets文件夹?

在组件上的 Vue 3 中获取 URL 查询参数

如何在 vue.js 2 的其他组件中调用方法?

在 vuejs 中的图像中包含 router-link 标记

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

如何在nuxt路由中添加meta?

Vuex - 何时从 http 服务器加载/初始化存储数据

VS代码中的红点是什么意思

如何将数据传递给 Vue.js 中的路由视图

样式化 Vue 插槽

如何在 vue.js 2 上循环对象观察者?

更改事件上的 Select2 在 Vuejs 中不起作用

Vue.js 无法读取 null 的属性 length长度