Feature request: An easier way to include answers from previous questions in later questions

[mgd722]

Is your feature request related to a problem? Please describe.
Often, later questions in the survey depend on answers from previous questions. Example:

1. What is your favorite food?
   <QuestionType.Text>

2. What is your second favorite food?
   <QuestionType.Text>

3. Which of your favorite foods is saltier?
   <QuestionType.MultipleChoice>
<ChoiceOption answer_1>
<ChoiceOption answer_2>

Describe alternatives you've considered
Currently I have my questions array as a computed property that can update question choices based on listening to previous answers. This is awkward and not very robust. I have to iterate through the questions array, find the question with a given id that I'm looking for, get the answer, do the same thing for the second question, then find the question I want to update, and finally create a new array of ChoiceOption objects for it. It works but it feels hacky and way more verbose than it should be.

Describe the solution you'd like
There should be some easy way to rely on answers from previous questions. The current system of instantiating a new ChoiceOption in the component's data object makes this difficult. After reviewing the source code, I think allowing developers to pass flow-form-questions directly to the flow-form component as a slot would allow for the most extensibility and would be most Vue-like. Developers could still use the existing data-based method of passing questions if they wanted, but an option for something like this would be very powerful and (in my opinion) easier for devs to create different question tracks as well:

<flow-form
    // ...your regular flowform options
>
    <question
        v-model="favoriteFood"
        type="Text"
        // ...include any other QuestionModel parameters
    />
    <question
        v-model="secondFavoriteFood"
        type="Text"
    />
    <question
        v-model="saltierFood"
        type="MultipleChoice"
        :options="{label: favoriteFood}, {label: secondFavoriteFood}"
    />
</flow-form>

[mgd722]

As an added bonus, under this proposed change question answers would be stored in the parent component's data (via the v-model). This would allow developers to capture incomplete forms. Using the current supported events in the API, it seems I can only get data once the entire form is complete. This would allow us to watch the answers to individual questions and trigger events based on that. Currently to get the answers on-the-fly while the user is filling them out, I do the following:

computed: {
    answers() {
        return this.questions.reduce((obj, item) => (obj[item.id] = item.answer, obj) ,{})
    }
},
watch: {
    'answers.favoriteFood'(newVal, oldVal) {
        // favoriteFood answer changed, do something...
    }
}

This is both more verbose and more computationally expensive than it needs to be. I can open a separate issue for this if you all think it's valid, but I think that this problem would get solved as part of the solution to #136

[spinn]

We like your idea with questions defined as child components, we'll definitely look into implementing this in the future. In the meantime, we added two new events - answer (which gets fired after a question is answered) and step (which gets fired when a new step is displayed), you can see the changes in this commit: 7b9f0e8

[mgd722]

Awesome, those changes will definitely help! I'm going to mess around a bit with the library to give questions as subcomponents a try. If I get anything substantial done I'll submit a PR and you guys can take a look and see what you think.

[webwakko]

Would this also give the opportunity to use the answer from previous question in the following question like:
1ste question is asking the name
2nd starts with "Hi NAME, ..." which acts as a personal greeting ..
I know that the original Typeform is able to select the response from previous question to use in the next question

[mgd722]

Yes, using component-based questions would allow previous answers to be used anywhere else in the future questions.

[spinn]

Support for component-based questions has been added in feature/questioncomponents:

https://github.com/ditdot-dev/vue-flow-form/tree/feature/questioncomponents

We now only have to thoroughly test this after which it'll get merged to master. Example usage:

<template>
  <flow-form>
    <question :type="QuestionType.Text" v-model="answer_1" :required="false"></question>
  </flow-form>
</template>

<script>
  import FlowForm from '../../src/components/FlowForm.vue'
  import { QuestionType } from '../../src/models/QuestionModel'
  import Question from '../../src/components/Question.vue'

  export default {
    name: 'example',
    
    components: {
      FlowForm,
      Question
    },

    data() {
      return {
        QuestionType: QuestionType,
        answer_1: ""
      }
    }
  }
</script>

[spinn]

Questions can now be defined as components, we'll update the documentation and publish a new version soon. To use this, import the new Question component and define the question parameters as props on the component, eg.:

<template>
  <flow-form>
    <question type="text" title="Title" v-model="answer_1" ...></question>
  </flow-form>
</template>

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

  export default {
    name: 'example',

    components: {
      FlowForm,
      Question
    }.
    
    data() {
      return {
        answer_1: ''
      }
    }
    ...
  }
</script>