vue app

src/components/DropdownSectionGrid.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="row p-2">
+        <div v-for="(item, index) in items" :key="index" class="col-md-3">
+
+            <div class="my-check v2">
+
+                <input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
+                    type="radio" v-model="value" :value="item.name">
+
+                <label :for="item.name"><img style="width:100%"
+                        :src="'https:/magico.pl/assets/images/pagebuilder/' + item.name + '.jpg'"
+                        :alt="item.label" /></label>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+<script>
+import grid from './grid.js'
+
+export default {
+
+    methods: {},
+    data: function () {
+        return {
+            items: grid,
+            value: '',
+        }
+    },
+}
+</script>
+<style>
+.my-check input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+}
+
+.my-check label {
+    cursor: pointer;
+}
+</style>