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>

我只想有一个强制复选框。不是所有的人。他们组中的任何复选框。

Answer 1

像这样的事情怎么样？

笔在这里： 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;
        }

      }
   }