0

I'm just starting with Vue and vuelidate. I have a form which shall work in the following way:

  1. The form shows a Yes/No radio button group.
  2. If the radio button "Yes" is selected then the form shows a checkbox.
  3. The submit button for the form shall be enabled if one of the following conditions is true:
    1. The radio button is set to "No". OR
    2. The radio button is set to "Yes" AND the checkbox is checked.

I'm having trouble with the conditions described in 3. My current validation looks like this:

termsAccepted: { checked: value => value === true }

This basically works for case 3.2 but not for 3.1. In that case the form is still disabled.

  b-form-checkbox#termsAccepted(
    v-model="termsAccepted"
    :state="!$v.termsAccepted.$invalid"
    :disabled="disableForm"
  )
Robert Strauch
  • 12,055
  • 24
  • 120
  • 192

1 Answers1

1

Thats sound like a computed property should to the job: Computed Property Documentation
You could do something like:

computed: {
    isEnabled() {
      return !radiobutton || (radiobutton && checkbox.checked)
    }
  }
tony19
  • 125,647
  • 18
  • 229
  • 307
mava
  • 2,544
  • 1
  • 10
  • 17