Replaced code in template by computed values (like lionor)

resources/ts/bo/components/ListItemComponent.vue

@@ -12,11 +12,7 @@
             class="table-action"
           >
             <button
-              v-if="
-                displayHeaders.filter((header) => {
-                  return header;
-                }).length > 1 && itemList.length > 1
-              "
+              v-if="hasHeader"
               @click.prevent="removeAllHeaders()"
               class="btn btn-sm btn-danger"
               :title="__('Remove all headers')"
@@ -30,11 +26,7 @@
             class="col-6 align-middle"
           >
             {{ __("Header") }}
-            ({{
-              displayHeaders.filter((header) => {
-                return header;
-              }).length
-            }})
+            ({{ countHeaders }})
           </th>
           <th
             v-for="(column, columnIndex) of itemColumns"
@@ -107,7 +99,7 @@
                 :name="`${inputName}[${String(itemIndex)}][header]`"
                 type="text"
                 :placeholder="__('Recipe of chocolate cookies')"
-                v-model="item['header' as keyof typeof item]"
+                v-model="item['header']"
               >
               <FontAwesomeIcon
                 icon="fa-solid fa-angles-right"
@@ -133,7 +125,7 @@
               class="form-control form-control-sm"
               :name="`${inputName}[${String(itemIndex)}][${column[0]}]`"
               :type="itemType[columnIndex]"
-              v-model="item[column[0] as keyof typeof item]"
+              v-model="item[column[0]]"
               :placeholder="inputPlaceholder[columnIndex]"
               :min="itemType[columnIndex] == 'number' ? '0' : undefined"
             >
@@ -195,7 +187,7 @@ export default defineComponent({
   },
   mixins: [trans, parseLaravelErrorMessages],
   data(): {
-    itemList: Object[];
+    itemList: Array<Record<string,string>>;
     itemColumns: string[][];
     itemLimit: number[];
     inputName: string;
@@ -207,11 +199,11 @@ export default defineComponent({
     displayBtnAdd: boolean;
     displayBtnRemove: boolean;
     displayHeader: boolean;
-    displayHeaders: boolean[];
+    displayHeaders: Array<boolean>;
     tooltipList: HTMLButtonElement[];
   } {
     return {
-      itemList: [{}],
+      itemList: [],
       itemColumns: [[""]],
       itemLimit: [0, 0],
       inputName: "",
@@ -227,6 +219,18 @@ export default defineComponent({
       tooltipList: [],
     };
   },
+  computed : {
+    hasHeader() {
+      return this.displayHeaders.filter((header : boolean) => {
+        return header;
+      }).length > 1 && this.itemList.length > 1;
+    },
+    countHeaders() {
+      return this.displayHeaders.filter((header: boolean) => {
+        return header;
+      }).length;
+    }
+  },
   mounted() {
     const json = String(this.$attrs.json ?? "{}");
     const data = JSON.parse(json);
@@ -258,7 +262,9 @@ export default defineComponent({
         }
       } else {
         this.itemList.forEach((item: { header?: string }, key) => {
-          if (item.header) this.displayHeaders[key] = true;
+          if (item.header) {
+            this.displayHeaders[key] = true;
+          }
         });
       }
     },