ditdot-dev/vue-flow-form

Feature request: previous answer specific select options

webwakko opened this issue · 1 comments

Is your feature request related to a problem? Please describe.
I currently have a form with 2 select option questions, but multiple other questions (before and after).
The first select question has 3 options and when the user selects one of those, the options in the next question should be related to the selection in the first question. As far as I can see there is no way, except jumping to a duplicated question. But this is in fact a dirty hack

Describe the solution you'd like
If the user selects option 1 in the first select question > select question 2 should have options A and B
if the user selects option 2 in the first select question > select question 2 should have options C and D
etc...
But when the first select question is followed by a few other normal questions and then you get the second select question, this should also be working.

Describe alternatives you've considered
Duplicating the select question, but as said, a dirty hack

spinn commented

Hi,

you could accomplish this by using question components and then dynamically setting the options for the second question, something like this:

<template>
  <flow-form>
    <question
      type="multiplechoice"
      :options="[{label: 'First'}, {label: 'Second'}]" 
      v-model="answers.first">
    </question>
    
    <question
      type="multiplechoice"
      :options="answers.first === 'First' ? [{label: 'A'}, {label: 'B'}] : [{label: 'C'}, {label: 'D'}]"
      v-model="answers.second">
    </question>
  </flow-form>
</template>

<script>
  import FlowForm from '../../src/components/FlowForm.vue'
  import Question from '../../src/components/Question.vue'

  export default {
    components: {
      FlowForm,
      Question
    },

    data() {
      return {
        answers: {}
      }
    }
  }
</script>

This would be even cleaner if you'd use computed variables (or even one or more methods) for setting the options for the second and any subsequent questions.

https://www.ditdot.hr/en/docs/vue-flow-form-guide#question-components