I am looking to dynamically create a form with conditional fields. The structure of the form is stored in an object called Q. Below is an example of a Vue component that utilizes bootstrap-vue.
<template>
<div>
<div v-for="q of Q">
<br/>
<template v-if="q.type == 'input'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-input v-model="q.value" :type="q.subtype" :placeholder="q.placeholder"></b-form-input>
Value: {{ q.value }}
</template>
<template v-if="q.type == 'radio'">
{{ q.question }}
<em v-if="q.comment"><br />{{ q.comment }}</em>
<b-form-group>
<b-form-radio-group buttons
stacked
v-model="q.value"
:options="q.options"/>
</b-form-group>
Value: {{ q.value }}
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Questionnaire',
data() {
return {
locale: 'en',
Q: [
{
name: 'age',
value: null,
question: 'How old are you?',
placeholder: 'Your age...',
comment: 'years since you were born',
type: 'input',
subtype: 'number',
range: [18, 99],
},
{
name: 'cq',
value: null,
question: 'Conditional Question?',
type: 'radio',
options: [
{text: 'Yes', value: '0'},
{text: 'No', value: '1'},
],
if: [{object: 'age', largerthan: 30}],
},
]
};
},
methods: {
onChange: function(){
alert('test');
},
},
}
</script>
The goal is to display the "Conditional Question" only if the age > 30.
- Accessing
this.Qin the Q object is not possible as it does not exist at this point. - Using v-on:change="onChange" might work, but it goes against the Vue philosophy.
I am flexible with the structure of the object and plan to retrieve it through AJAX...
My question: Is there a method to monitor this.Q[0].value? or another way to make the second question available only if the first has a specific value?