vue.js - Vuetify - 如何正确验证复选框组

标签 vue.js vuejs2 vuetify.js

是否有可能以与 radio 组相同的方式在 Vuetify 中验证复选框组?我试图“整体”验证它们,但每个复选框都是单独验证的。如何强制选中至少一个复选框字段?

    <template>
    <v-form v-model="valid" ref="form">
    <div v-for="(x, i) in items">
	      <v-checkbox
              :true-value="1"
              :false-value="0"
              :rules="[v => !!v || 'You must agree to continue!']"
              v-model="x"
            />
    </div>
    </v-form>
    <template>

我希望只有一个必填复选框。不是所有的人。他们组中的任何复选框。

最佳答案

试试这个方法:

<template>
   <v-form v-model="valid" ref="form">
     <div v-for="(x, i) in items">
       <v-checkbox
         :true-value="1"
         :false-value="0"
         :rules="[v => v.length > 0 || 'You must agree to continue!']"
         v-model="x"
        />
      </div>
   </v-form>
<template>

关于vue.js - Vuetify - 如何正确验证复选框组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49353774/

相关文章:

javascript - 访问 Vue JS 实例监视对象中的 $refs 数组

javascript - Vuetify v-btn 点击事件

javascript - Vue 路由器总是在初始加载时加载延迟加载的模块

vue.js - vuetify 在运行时更改 flex 大小

javascript - 使用 Nuxt JS 进行 Vuetify js 优化

css - Vuetify v-list-item 悬停时样式更改

javascript - Firestore 中存储的 Date 对象的行为将会改变,您的应用可能会崩溃

javascript - 使用 Nuxt Site 作为模板

checkbox - 如何使用 Vuetify 选择多个复选框?

javascript - nuxt layout - 为移动端和桌面端提供不同的布局