Question

我正在尝试验证并遇到问题，因为我想检查我的复选框是否有$error，它将不会提交表单。输出$ v后，我得到以下内容，但是单击时它不会改变。基本上，我有一个大表格，如果将$ error设置为true，它将不会提交。我也想将$error添加到复选框。 Code here

"form": {
    "checkbox": {
      "required": true,
      "$model": false,
      "$invalid": false,
      "$dirty": true,
      "$anyDirty": true,
      "$error": false,
      "$anyError": false,
      "$pending": false,
      "$params": {
        "required": {
          "type": "required"
        }
      }
    }

Answer 1

带有复选框，您需要使用sameAs

  validations: {
    form: {
      checkbox: {
        sameAs: sameAs( () => true )
      }
    }
  }

Answer 2

您需要创建一个这样的自定义验证器。

data(){
  checkbox_items: [],
  options: [
    { id: 1, label: 'label1' }
    { id: 2, label: 'label2' }
    { id: 3, label: 'label3' }
  ]
},
validations: {
  checkbox_items: {
    checked: value => {
      return value.length
    }
  }
}

模板：

<div v-for="item in options" :key="item.id">
  <input type="checkbox"
    :id="'item.id"
    :class="{ error: $v.checkbox_items.$error }"
    :value="item.id"
    v-model="checkbox_items"
    @blur="$v.checkbox_items.$touch()">
  <label :for="'item.id">{{ item.label }}</label>
</div>

$ error不要在Vuelidate复选框中进行更改

2 个答案: