Add mixin for getting question component instances

Author: spinn

src/components/FlowForm.vue

@@ -135,6 +135,7 @@
   import QuestionModel, { ChoiceOption, LinkOption, QuestionType } from '../models/QuestionModel'
   import LanguageModel from '../models/LanguageModel'
   import { IsMobile } from '../mixins/IsMobile'
+  import { ComponentInstance } from '../mixins/ComponentInstance'
 
   export default {
     name: 'FlowForm',
@@ -173,6 +174,7 @@
 
     mixins: [
       IsMobile,
+      ComponentInstance
     ],
 
     data() {
@@ -299,19 +301,18 @@
               descriptionLink: LinkOption
             }
 
-            window.a = this
-
             this
               .$slots
               .default()[0]
               .children
               .filter(q => q.type && q.type.name.indexOf('Question') !== -1)
               .forEach(q => {
-                const  props = q.props
+                const props = q.props
+                const componentInstance = this.getInstance(props.id)
                 let model = new QuestionModel()
 
-                if (q.question !== undefined) {
-                  model = q.question
+                if (componentInstance.question !== null) {
+                  model = componentInstance.question
                 } 
 
                 if (props.modelValue) {
@@ -363,7 +364,7 @@
                   }
                 })
 
-                q.question = model
+                componentInstance.question = model
 
                 model.resetOptions()
 

src/components/Question.vue

@@ -1,20 +1,35 @@
 <script>
+  import { ComponentInstance } from '../mixins/ComponentInstance'
+
   export default {
     name: 'Question',
+
+    mixins: [
+      ComponentInstance
+    ],
+
+    props: {
+      id: null,
+      modelValue: [String, Array, Boolean, Number, Object]
+    },
     
     data() {
       return {
         question: null
       }
     },
 
+    mounted() {
+      this.setInstance()
+    },
+
     render() {
       return null
     },
 
     watch: {
       'question.answer'(val) {
-        this.$emit('input', val)
+        this.$emit('update:modelValue', val)
       }
     }
   }

src/components/QuestionTypes/BaseType.vue

@@ -7,7 +7,7 @@
     https://www.ditdot.hr/en
   */
 
-  import QuestionModel, { QuestionType } from '../../models/QuestionModel'
+  import QuestionModel from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
   import { IsMobile } from '../../mixins/IsMobile'
 

src/mixins/ComponentInstance.js

@@ -0,0 +1,19 @@
+/*
+  Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
+  https://github.com/ditdot-dev/vue-flow-form
+  https://www.ditdot.hr/en
+*/
+
+const instances = {}
+
+export const ComponentInstance = {
+  methods: {
+    getInstance(id) {
+      return instances[id]
+    },
+
+    setInstance() {
+      instances[this.id] = this
+    }
+  }
+}