Vuetify - 如何正确验证一组复选框？

Question

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

我希望只有一个必选复选框，而非所有的复选框。可以是其中任何一个。

- Marek Marczak

---

展示一些代码。现在很难理解你的意思。 - acdcjunior

我刚刚添加了一些解释。我的问题是：如何强制只检查组中的一个字段？我不想单独编写每个字段的代码。 :/ - Marek Marczak

Answer 1

尝试以下方式：

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

- OysterD3

Answer 2

我知道回答这个线程已经太晚了，但这可能会帮助想要在数组中验证复选框的人。

---

怎么工作？ 这个概念很简单，必须在数组中至少选择一个复选框

---

在这里，当索引==0时，我想在第一个元素上显示错误，所以我应用了:rules， 然后我想检查至少选择一个元素，所以我决定在给定的以下方法中编写条件，通过alllow_validate:false。然后在计算中执行验证。

  <div  v-for="(checkbox , index) in yourarray" :key="index">
      <v-checkbox v-if="index==0" @change="Checkboxlist()" :rules="checkbox_rules" label="iam first checkbox" :value="checkbox.cv"></v-checkbox>
     <v-checkbox v-else  @change="Checkboxlist()" label="checkboxfinite" :value="checkbox.checkbox_value"></v-checkbox>

    </div>

2.声明数据

data(){
     yourarray:[{cv:'checkbox1'},{cv:'checkbox2'},{cv:'checkbox3'}],
    alllow_validate:false,
}

3.method

  methods: {
  Checkboxlist(){

 this.$nextTick(() => {

    var checked=document.querySelectorAll('input[type=checkbox]:checked');

var store="";
var firstelement=false;

    for(var i=0;i<checked.length;i++){

     if(checked[i].checked==true)
     {
 this.alllow_validate=true;
if(!firstelement){
   firstelement=true;

   store=checked[i].value;

 }else{
store+=','+checked[i].value;

 this.alllow_validate=false;
 }
         }
    }

//selected checkbox value 
 alert(store);    
    })
}   
  },

3.computed

computed:{

checkbox_rules(){

const rules=[];

if(this.alllow_validate){

// alert("rule");
 const rule=
           v => (!!v) || "Field is required";
            rules.push(rule)



}
return rules;


}

- Balaji

Answer 3

这样怎么样？

笔在这里：https://codepen.io/anon/pen/WzoVQZ

<v-form v-model="valid" ref="form">
  <p>{{ selected }}</p>
  <v-checkbox label="John" 
              v-model="selected"    
              value="John"
              ></v-checkbox>
  <v-checkbox label="Jacob" 
              v-model="selected" 
              value="Jacob"
              ></v-checkbox>
  <v-btn @click="submit">
    SUBMIT
  </v-btn>
</v-form>
<v-snackbar
  :timeout="5000"
  color="red"
  v-model="snackbar"
  >
  Please select at least one checkbox.
  <v-btn dark flat @click.native="snackbar = false">Close</v-btn>
</v-snackbar>



data: () => ({
    //
    snackbar:false,
    selected:['John'],
  }),
   methods: {
      submit () {

        if (this.selected.length > 0){
          this.snackbar = true;
        }

      }
   }

- Chase Roberts

---

谢谢你的回答，Chase。它在Vue方面得到了验证，但在Vuetify方面没有。Vuetify使用一系列函数来验证表单。就像这里https://vuetifyjs.com/en/components/forms#example-validation-with-submit-and-clear。我想知道是否有可能通过这种方式验证所需复选框的数量，以实现当字段出现错误时的红色边框和抖动效果。 - Marek Marczak