Как сделать валидацию checkbox group в Element UI?

Question

[postya]

Приложение на VUE JS + Element UI
Имеется группа чекбоксов(checkbox group). Нужно проверить,чтобы хотя бы один чекбокс был чекнут
Как это можно сделать?

<el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules">
                
        <el-form-item prop="cars">
            <el-checkbox-group v-model="ruleForm.cars">
                <el-checkbox
                  label="toyota"
                  :checked="ruleForm.carModels.toyota">Toyota
                </el-checkbox>
    
                <el-checkbox
                  label="ferrari"
                  :checked="ruleForm.carModels.ferrari">Ferrari
                </el-checkbox>
    
                <el-checkbox
                  label="suzuki"
                  :checked="ruleForm.carModels.suzuki">Suzuki
                </el-checkbox>
    
                <el-checkbox
                  label="bmw"
                  :checked="ruleForm.carModels.bmw">BMW
                </el-checkbox>
    
            </el-checkbox-group>
        </el-form-item>
        
            <button @click.prevent.stop="validateCars('ruleForm')">Validate Cars</button>
    </el-form>

Data:

ruleForm: {
       cars: [],
       carModels: {
         toyota: true,
         ferrari; false,
         suzuki: false,
         bmw: true
       }
     }    
        
    rules: {
        cars: [
            {
           required: true,
            trigger: 'blur',
             message: 'Choose car',
                   }     
              ]
            }   
     
    methods: {
      async validateCars(formName) {
        try{
          if(await this.refs[formName].validate()) {
            console.log('success')
          }
        }catch(e){}
       }
     }

Answer 1

[Тигран Абрамян]

<span v-if="ruleForm.isValid === false">
  Текст ошибки
</span>

ruleForm: {
  cars: [],
  isValid: null,
  carModels: {
    toyota: true,
    ferrari: false,
    suzuki: false,
    bmw: true
  }
}

validateCars(formName) {
  if (this.ruleForm.cars.length === 0) {
    this.ruleForm.isValid = false;
  } else {
    this.ruleForm.isValid = true;
    console.log('success');
  }
}

Comments

[postya]

ни один чекбокс не чекнут, ошибка от валидации не появляется. МОжно ли как-то заставить сообщения от валидации появиться на конкретном поле?

[Тигран Абрамян]

postya,

<span v-if="ruleForm.isValid === false">
  Текст ошибки
</span>

ruleForm: {
  cars: [],
  isValid: null,
  carModels: {
    toyota: true,
    ferrari: false,
    suzuki: false,
    bmw: true
  }
}

validateCars(formName) {
  if (this.ruleForm.cars.length === 0) {
    this.ruleForm.isValid = false;
  } else {
    this.ruleForm.isValid = true;
    console.log('success');
  }
}

[postya]

Тигран Абрамян, Благодарю!