C
C
castetus2021-04-21 13:54:53
Vue.js
castetus, 2021-04-21 13:54:53

Vuelidate - how to check 2 interdependent checkboxes?

Hello everyone, I don’t understand how to do it:
There are 2 checkboxes, the condition is that at least one of them (any) is required
. if at least one is checked, validation passes. If both, then too. If none, then error.
How to explain this vuelidate?
Now I did it like this:

<template>
    <input type="checkbox" name="life" id="" v-model="life" @change="$v.life.$touch()">
    <label for="life">Жизнь</label>
    <input type="checkbox" name="property" id="" v-model="property" @change="$v.property.$touch()">
    <label for="life">Имущество</label>
</template>

And validation:
validations() {
    if(!this.property){
      return {
        life: {
          required (val) {
            return val
          }   
        },
      }
    }
    if(!this.life){
      return {
        property: {
          required (val) {
            return val
          }   
        },
      }
    }
  },


One by one it works, if you check both, then "Error in v-on handler: "TypeError: Cannot convert undefined or null to object"
What's wrong?

And in my opinion, I went somewhere wrong with this visual date.
Maybe Is this all easier to do?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2021-04-21
@castetus

One by one works, if you check both, then "Error in v-on handler: "TypeError: Cannot convert undefined or null to object"

What does validations return if both are true? Nothing. Let there always be an object:
validations() {
  return {
    life: this.property ? {} : { required: v => v },
    property: this.life ? {} : { required: v => v },
  };
},

<div>STATUS: {{ $v.$invalid ? 'ЖОПА' : 'OK' }}</div>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question