Vuetify를 사용하여 확인란 그룹을 확인하는 방법

Vuetify를 사용하여 확인란 그룹을 확인하는 방법

내 Vue + Vuetify 프로젝트에는 체크박스 그룹이 있습니다.Vuetify의 "Validation with submit & clear"에서 체크박스를 1개 이상 켜고 싶습니다.

무선 그룹의 검증은 간단하며, 무선 그룹에 규칙을 적용하면 정상적으로 동작합니다.

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

질문:.

체크박스가 1개 이상 켜져 있는 것을 확인하는 규칙을 체크박스에 적용하려면 어떻게 해야 합니까?this.selected.length > 0?

도와주셔서 감사합니다!

다음과 같은 어레이를 사용하여 수행할 수 있습니다.v-model. 검증에는 계산된 속성을 사용합니다.

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

여기가 고문서입니다.

또, 그 방법에 주의해 주세요.hide-details의 특성v-checkbox사용됩니다.

왜 그 이유를 정의하지 않는거죠?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

언급URL : https://stackoverflow.com/questions/57754552/how-to-validate-checkbox-group-with-vuetify