fix input array options handling and prevent js error, fixes #5020

Closes #5020

Merge request studip/studip!3830

3 files changed, 18 insertions, 19 deletions

diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js
index 4b1ac6d..c0fe942 100644
--- a/resources/assets/javascripts/bootstrap/vue.js
+++ b/resources/assets/javascripts/bootstrap/vue.js
@@ -15,7 +15,7 @@ function attachComponents(app, configuredComponents) {
                     ) {
                         this.$el.closest('.studip-dialog')
                             .querySelector('.ui-dialog-buttonpane')
-                            .remove();
+                            ?.remove();
                     }
                     if (mounted) {
                         mounted.call(this, args);
diff --git a/resources/vue/components/questionnaires/InputArray.vue b/resources/vue/components/questionnaires/InputArray.vue
index 7cd6844..e1657a0 100644
--- a/resources/vue/components/questionnaires/InputArray.vue
+++ b/resources/vue/components/questionnaires/InputArray.vue
@@ -36,7 +36,7 @@
                         </td>
                         <td>
                             <input type="text"
-                                   ref="inputs"
+                                   :ref="`inputs-${index}`"
                                    :placeholder="label"
                                    @paste="(ev) => onPaste(ev, index)"
                                    v-model="element.value">
@@ -93,30 +93,21 @@ export default {
     data() {
         return {
             assistiveLive: '',
+            options: this.modelValue.map((element, index) => ({
+                value: element,
+                index: index,
+            })),
         };
     },
-    computed: {
-        options: {
-            get() {
-                return this.modelValue.map((element, index) => ({
-                    value: element,
-                    index: index,
-                }));
-            },
-            set(value) {
-                this.$emit('update:modelValue', value.map(element => element.value));
-            }
-        }
-    },
     methods: {
         addOption(val = '', position = this.options.length) {
-            this.$set(this.options, position, {
+            this.options.splice(position, 0, {
                 value: val.trim(),
                 index: position,
             });
 
             this.$nextTick(() => {
-                this.$refs.inputs[position].focus();
+                this.$refs[`inputs-${position}`].focus();
             });
         },
         deleteOption(index) {
@@ -169,6 +160,14 @@ export default {
 
             return Promise.resolve(index + direction);
         },
+    },
+    watch: {
+        options: {
+            handler(current) {
+                this.$emit('update:model-value', current.map(element => element.value));
+            },
+            deep: true,
+        }
     }
 }
 </script>
diff --git a/resources/vue/mixins/QuestionnaireComponent.js b/resources/vue/mixins/QuestionnaireComponent.js
index 62f8e2d..2ff2750 100644
--- a/resources/vue/mixins/QuestionnaireComponent.js
+++ b/resources/vue/mixins/QuestionnaireComponent.js
@@ -1,5 +1,5 @@
 export const QuestionnaireComponent = {
-    emits: ['update:modelValue'],
+    emits: ['update:model-value'],
     props: {
         modelValue: Object
     },
@@ -16,7 +16,7 @@ export const QuestionnaireComponent = {
     watch: {
         val_clone: {
             handler(current) {
-                this.$emit('update:modelValue', current);
+                this.$emit('update:model-value', current);
             },
             deep: true
         },