fixed: id of radio grids should be unique

assets/js/Stepper.vue

@@ -4,7 +4,7 @@
             <slide class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                 <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
-                <radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
+                <radio-grid id="category" v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
             </slide>
 
@@ -12,19 +12,19 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
-                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
+                <radio-grid id="house_plot_area" v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
-                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <radio-grid id="house_living_area" v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
-                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
+                <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
@@ -36,7 +36,7 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
-                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="house_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
@@ -44,19 +44,19 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
-                <radio-grid v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
+                <radio-grid id="gewerbe_living_area" v-model="value.living_area" class="mt-8" :options="gewerbeLivingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?</heading>
-                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
+                <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
-                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
@@ -68,7 +68,7 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
-                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="gewerbe_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
@@ -76,13 +76,13 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
-                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <radio-grid id="apartment_living_area" v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
-                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
+                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" class="mt-8" :options="apartmentNumbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
@@ -94,7 +94,7 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
-                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="apartment_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
@@ -102,13 +102,13 @@
             <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
-                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
+                <radio-grid id="plot_plot_area" v-model="value.plot_area" class="mt-8" :options="plotPlotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
             <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
-                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <radio-grid id="plot_condition" v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 

assets/js/components/RadioGrid.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex space-x-4 flex-wrap justify-center">
-        <label :key="index" v-for="(item, index) in options" class="w-40">
-            <input class="invisible absolute left-0 top-0 peer" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" name="category" />
+        <label :key="index" v-for="(item, index) in options" class="w-40" :for="`${id}-${index}`">
+            <input class="invisible absolute left-0 top-0 peer" :id="`${id}-${index}`" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" :name="id" />
             <span
                 class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
             >
@@ -15,6 +15,9 @@
 <script>
 export default {
     props: {
+        id: {
+            required: true
+        },
         value: {
             default: function() {
                 return null;