ditdot-dev / vue-flow-form

Create conversational conditional-logic forms with Vue.js.

Home Page:https://www.ditdot.hr/en/vue-flow-form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: Question component blank page with more than one question

WebMedic-X opened this issue · comments

Describe the bug
When using the question component and having more than one question, the first page is blank.

In other words, the first question is not working and we can only the see the second question when navigating to next page from the bottom navigation.

To Reproduce
Steps to reproduce the behavior:
Use the question component example from here: #194 (comment)

Expected behavior
First question to show properly.

Another issue:

When going to next question, the second question is then repeated twice:
Screenshot 2022-10-02 at 1 42 12 PM

@WebMedic-X I had the same problem -- it turns out the documented example is incorrect.

Each <question> needs to have a unique id= in addition to the documented props.

I also found that, sometimes, having an HTML comment node causes the vue-flow-form code to break with an Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

Here's a working version of their example -- note that it is identical to the documented code at https://www.ditdot.hr/en/docs/vue-flow-form-guide#question-components except for the addition of the id= attributes and removal of the comment node:

<template>
  <flow-form>
    <question id="name" type="text" title="Hello, what is your name?" v-model="name" ></question>
    <question id="age" type="number" title="What is your age?" v-model="age"></question>
    <question id="sorry" v-if="age < 18" type="sectionbreak" title="Sorry, you are under 18"></question>
    <question id="welcome" v-else type="sectionbreak" :title="'Nice to meet you, ' + name + '. Welcome to our site!'"></question>
  </flow-form>
</template>

<script>
  import FlowForm from '../../src/components/FlowForm.vue'
  import Question from '../../src/components/Question.vue'
  // If using the npm package, use the following line instead of the ones above.
  // import { FlowForm, Question } from '@ditdot-dev/vue-flow-form'

  export default {
    name: 'example',
    components: {
      FlowForm,
      Question
    },
    data() {
      return {
        name: '',
        age: ''
      }
    }
  }
</script>