Is there a way to hide or show inputs when using Vue Formulate Schemas?

Question

I have been trying to create a form using Vue Formulate schemas. Specifically, I want two radio buttons, A and B. When A is clicked, an extra input field must appear below. When B is clicked, this input field must be hidden.

It is important that I use a schema.

Any ideas?

Answer 1

In Vue Formulate, the schema itself is reactive, so the recommendation for doing conditional fields using a schema is to pass the schema through a computed prop first. For example:

<template>
  <FormulateForm
    v-model="formValues"
    :schema="conditionalSchema"
  />
</template>

<script>
const schema = [
  {
    type: "radio",
    options: { a: 'A', b: 'B' },
    label: 'Do you like a or b?',
    name: 'question',
    id: 'question'
  },
  {
    type: 'text',
    name: 'c',
    id: 'c',
    label: 'If you like b, then you must like c!'
  }
]

export default {
  data () {
    return {
      formValues: {}
    }
  },
  computed: {
    conditionalSchema() {
      if (this.formValues.question !== 'b') {
        return schema.filter(({ name }) => name !== 'c')
      }
      return schema
    }
  }  
}
</script>

Here's that code in CodePen: https://codepen.io/justin-schroeder/pen/dyXPGQL