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?
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