Vue.js动态复选框验证

问题描述

我对复选框验证有疑问。当我提交时，您会看到第一个元素是必需的，这很好，但是当我选中此复选框并尝试再次提交时，该复选框仍然无效。

该复选框在选中后应变为有效。.

您能帮助修复它吗？

我的小提琴：https://jsfiddle.net/owdamsc4/2/

const FORM_NAME = 'step1Form'
const FORM_RULES = {}
const FORM_MODEL = {
  consents: {}
}
validateCheckBox = (rule,value,callback) => {
  if (value !== true) {
    callback(new Error('Field is required'))
  }
  callback()
}
const VALIDATORS = {
  required: { required: true,message: 'field required',trigger: 'submit' },checkBoxrequired: { type: 'boolean',validator: validateCheckBox,trigger: 'submit' }
}

var Main = {
  data() {
    return {
      form: FORM_MODEL,rules: FORM_RULES,checkAll: false,formRef: FORM_NAME,"consentList": [
      {
        "name": "consent1","description": "desc 1","url1": null,"url2": null,"shouldBeSent": true,"order": "1","required": true
      },{
        "name": "consent2","description": "desc 2","order": "10","required": false
      },{
        "name": "consent3","description": "desc 3","order": "11","required": false
      }
    ]
     }
  },methods: {
   handleCheckAll () {
      this.consentList.forEach(consent => {
        this.form.consents[consent.name] = this.checkAll
      })
    },handleSingleConsent (name) {
      this.$forceUpdate()
      if (this.form.consents[name]) {
        this.form.consents[name] = true
        return
      }
      this.form.consents[name] = false
    },submitStep1 () {
      this.$refs[FORM_NAME].validate(valid => {
        if (!valid) {
          return false
        }
        console.log('success')
      })
    }
  },created () {
  this.consentList.forEach(field => {
        if (field.required) {
          Object.assign(this.rules,{ [field.name]: [VALIDATORS.checkBoxrequired]               })
        }
        this.form.consents[field.name] = false
      })
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.0.5/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.5/lib/index.js"></script>
<div id="app">
<el-form :ref="formRef" :model="form" :rules="rules" @submit.native.prevent="submitStep1">
      <div class="inputs">
      <el-form-item>
        <el-checkBox v-model="checkAll" @change="handleCheckAll">Select all</el-checkBox>
      </el-form-item>
      <el-form-item v-for="(consent,index) in consentList"
                    :key="index"
                    :prop="consent.name">
        <div class="checkBox-wrapper">
          <el-checkBox :id="consent.name" v-model="form.consents[consent.name]" @change="handleSingleConsent(consent.name)">
            <span v-if="consent.required" class="required" style="color: red;">*</span>
            <span>{{ consent.description }}</span>
          </el-checkBox>
        </div>
      </el-form-item>
      </div>
      <el-form-item>
        <div class="action-wrapper">
          <el-button type="primary" native-type="submit">submit</el-button>
        </div>
      </el-form-item>
    </el-form>

任何帮助将不胜感激。我整天都在浪费它。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript vue.js