Vuetify - 확인란 그룹을 올바르게 검증하는 방법

Vuetify - 확인란 그룹을 올바르게 검증하는 방법

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>

필수 체크박스는 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>

이 스레드에 대응하기에는 너무 늦었다는 것을 알지만, 어레이 내의 체크박스를 검증하고 싶은 사람에게 도움이 될 수 있습니다.

---

어떻게 작동합니까?이 개념은 간단합니다. 어레이에서 하나 이상의 확인란을 선택해야 합니다.

---

여기서 index==0, 첫 번째 요소에 오류를 표시하고 싶어서:discloss를 적용한 다음 하나 이상의 요소를 선택하여 alllow_discloss: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. 삭제

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

checkbox_rules(){

const rules=[];

if(this.alllow_validate){

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



}
return rules;


}

이런 거 어때요?

펜은 이쪽 : 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;
        }

      }
   }

언급URL : https://stackoverflow.com/questions/49353774/vuetify-how-to-properly-validate-group-of-checkboxes