support checkbox option without name

app/javascript/submission_form/multi_select_step.vue

@@ -5,9 +5,16 @@
     class="label text-2xl mb-2"
   >{{ field.name }}</label>
   <div class="flex w-full">
+    <input
+      v-if="modelValue.length === 0"
+      type="text"
+      :name="`values[${field.uuid}][]`"
+      :value="''"
+      class="hidden"
+    >
     <div class="space-y-3.5 mx-auto">
       <div
-        v-for="option in field.options"
+        v-for="(option, index) in field.options"
         :key="option.uuid"
       >
         <label
@@ -19,13 +26,13 @@
             :ref="setInputRef"
             type="checkbox"
             :name="`values[${field.uuid}][]`"
-            :value="option.value"
+            :value="optionValue(option, index)"
             class="base-checkbox !h-7 !w-7"
-            :checked="(modelValue || []).includes(option.value)"
+            :checked="(modelValue || []).includes(optionValue(option, index))"
             @change="onChange"
           >
           <span class="text-xl">
-            {{ option.value }}
+            {{ optionValue(option, index) }}
           </span>
         </label>
       </div>
@@ -36,6 +43,7 @@
 <script>
 export default {
   name: 'MultiSelectStep',
+  inject: ['t'],
   props: {
     field: {
       type: Object,
@@ -62,8 +70,15 @@ export default {
         this.inputRefs.push(el)
       }
     },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
+    },
     onChange () {
-      this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map(e => e.value))
+      this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map((e, index) => this.optionValue(e, index)))
     }
   }
 }