id for sections

src/components/PagebuilderContent.vue

@@ -48,8 +48,8 @@
         <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
           <component
             @itemRemoved="removeItem"
-            :key="contentId+'_'+index"
+            :key="keyIndex+contentId + '_' + index"
-            :id="contentId+'_'+index"
+            :id="keyIndex+contentId + '_' + index"
             v-bind:is="element.name"
             v-bind:value="element"
             v-model="value.items[index]"
@@ -108,7 +108,7 @@ export default {
       contentId: 'content' + Math.round(Math.random() * 1000)
     }
   },
-  props: { value: Object },
+  props: { value: Object, keyIndex: String },
   emits: ['update:modelValue'],
   components: {
     draggable,

src/components/PagebuilderSection.vue

@@ -7,21 +7,16 @@
           class="col-sm-12"
           v-for="(column, index) in value.columns"
           :value="column"
-          :key="'section_'+index"
+          :key="'section_' + index"
-          :id="'section_'+index"
+          :id="'section_' + index"
+          :keyIndex="'section_' + index"
           @change="onChange"
         ></PagebuilderContent>
       </div>
     </div>
 
-    <div
+    <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px">
-      class="pb_section_options position-absolute"
+      <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"
-      style="top: 12px; right: 14px; width: 20px"
-    >
-      <a
-        href="#"
-        title="Przenieś sekcje"
-        class="box-settings-icon box-move"
         ><i class="material-icons-outlined">sort</i></a
       >
       <a
@@ -45,43 +40,23 @@
         class="box-settings-icon box-delete text-danger"
         ><i class="material-icons-outlined">delete</i></a
       >
-      <b-modal
+      <b-modal v-model="show_settings" title="Ustawienia sekcji" @onClose="ustawieniaSave()">
-        v-model="show_settings"
-        title="Ustawienia sekcji"
-        @onClose="ustawieniaSave()"
-      >
         <div>
           <div>
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Nazwa sekcji </label>
-              <input
+              <input type="text" class="form-control" v-model="value.user_label" />
-                type="text"
-                class="form-control"
-                v-model="value.user_label"
-              />
             </div>
             <div class="form-group mb-2">
               <label class="w-100 col-form-label"> Klasa sekcji </label>
-              <input
+              <input type="text" class="form-control" v-model="value.class" />
-                type="text"
-                class="form-control"
-                v-model="value.class"
-              />
             </div>
             <div class="form-group mb-2">
               <label>Margines górny</label>
               <div class="input-group mb-3">
-                <input
+                <input type="number" class="form-control" v-model="value.margin_top" />
-                  type="number"
-                  class="form-control"
-                  v-model="value.margin_top"
-                />
                 <div class="input-group-append">
-                  <span
+                  <span class="input-group-text" id="basic-addon1">px</span>
-                    class="input-group-text"
-                    id="basic-addon1"
-                    >px</span
-                  >
                 </div>
               </div>
             </div>
@@ -89,73 +64,60 @@
           <div class="form-group mb-2">
             <label>Margines dolny</label>
             <div class="input-group mb-3">
-              <input
+              <input type="number" class="form-control" v-model="value.margin_bottom" />
-                type="number"
-                class="form-control"
-                v-model="value.margin_bottom"
-              />
               <div class="input-group-append">
-                <span
+                <span class="input-group-text" id="basic-addon1">px</span>
-                  class="input-group-text"
-                  id="basic-addon1"
-                  >px</span
-                >
               </div>
             </div>
           </div>
         </div>
         <div>
-          <button
+          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">Zapisz</button>
-            class="btn btn-outline-secondary"
-            @click.prevent="ustawieniaSave"
-          >
-            Zapisz
-          </button>
         </div>
       </b-modal>
     </div>
   </div>
 </template>
 <script>
-import grid from "./grid.js";
+import grid from './grid.js'
-import MagicoModal from "./MagicoModal.vue";
+import MagicoModal from './MagicoModal.vue'
-import PagebuilderContent from "./PagebuilderContent.vue";
+import PagebuilderContent from './PagebuilderContent.vue'
 export default {
   props: { value: Object },
-  emits: ["update:modelValue", "copy", "deleteSection"],
+  emits: ['update:modelValue', 'copy', 'deleteSection'],
   components: {
-    "b-modal": MagicoModal,
+    'b-modal': MagicoModal,
-    PagebuilderContent,
+    PagebuilderContent
   },
   data: function () {
-    return { items: grid, value2: "", show_settings: false };
+    return { items: grid, value2: '', show_settings: false }
   },
   methods: {
     changeSelect: function () {
-      this.onChange();
+      this.onChange()
     },
     onChange: function () {
-      this.$emit("change");
+      this.$emit('change')
     },
     deleteSection: function () {
-      this.$emit("deleteSection", this.value);
+      this.$emit('deleteSection', this.value)
     },
     copySection: function () {
-      this.$emit("copy", this.value);
+      this.$emit('copy', this.value)
     },
     toggleSettings: function () {
-      this.show_settings = !this.show_settings;
+      this.show_settings = !this.show_settings
     },
     ustawieniaSave: function () {
-      this.show_settings = false;
+      this.show_settings = false
-      this.onChange();
+      this.onChange()
     },
     rand: function (index) {
-      return "column" + index + Math.random() * 100;
+      return 'column' + index + Math.random() * 100
-    },
+    }
   },
-  mounted: function () {},
+  mounted: function () {}
-};
+}
 </script>
 <style>
 #pagebuilder {