changes

app/components/datatable/EditLabel.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
     <div
-      v-for="(v, i) in arr"
+      v-for="(v, i) in lines"
       :key="i"
       :class="i > 0 && 'mt-4'"
     >
-      <p class="font-semibold">Dòng thứ {{ i + 1 }}<span class="has-text-danger"> *</span></p>
+      <p class="font-semibold">
+        Dòng thứ {{ i + 1 }}
+        <span
+          v-if="i === 0"
+          class="has-text-danger"
+        >
+          *
+        </span>
+      </p>
       <div class="field has-addons mt-1">
         <div class="control is-expanded">
           <input
@@ -14,19 +22,6 @@
             v-model="v.label"
           />
         </div>
-        <div class="control">
-          <button
-            class="button is-success is-light"
-            @click="add()"
-          >
-            <span class="icon">
-              <Icon
-                name="material-symbols:add-rounded"
-                :size="20"
-              />
-            </span>
-          </button>
-        </div>
         <div
           class="control"
           @click="remove(i)"
@@ -41,6 +36,19 @@
             </span>
           </button>
         </div>
+        <div class="control">
+          <button
+            class="button is-success is-light"
+            @click="add"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:add-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+        </div>
       </div>
       <p
         class="help has-text-danger"
@@ -52,7 +60,7 @@
     <div class="buttons mt-5">
       <button
         class="button is-primary has-text-white"
-        @click="update()"
+        @click="update"
       >
         Cập nhật
       </button>
@@ -70,7 +78,7 @@ export default {
   props: ["label"],
   data() {
     return {
-      arr: [],
+      lines: [],
     };
   },
   created() {
@@ -79,37 +87,37 @@ export default {
       if (!this.$empty(v)) {
         let label = v + "</p>";
         label = this.$stripHtml(label);
-        this.arr.push({ label });
+        this.lines.push({ label });
       }
     });
   },
   methods: {
     add() {
-      this.arr.push({ label: undefined });
+      this.lines.push({ label: undefined });
     },
     remove(i) {
-      this.$remove(this.arr, i);
+      this.$remove(this.lines, i);
     },
     checkError() {
       let error = false;
-      this.arr.map((v) => {
+      this.lines.map((v) => {
         if (this.$empty(v.label)) {
           v.error = "Nội dung không được bỏ trống";
           error = true;
         }
       });
-      if (error) this.arr = this.$copy(this.arr);
+      if (error) this.lines = this.$copy(this.lines);
       return error;
     },
     update() {
       if (this.checkError()) return;
       let label = "";
-      if (this.arr.length > 1) {
-        this.arr.map((v, i) => {
-          label += `<p${i < this.arr.length - 1 ? ' style="border-bottom: 1px solid white;"' : ""}>${v.label.trim()}</p>`;
+      if (this.lines.length > 1) {
+        this.lines.map((v, i) => {
+          label += `<p${i < this.lines.length - 1 ? ' style="border-bottom: 1px solid white;"' : ""}>${v.label.trim()}</p>`;
         });
         label = `<div>${label}</div>`;
-      } else label = this.arr[0].label.trim();
+      } else label = this.lines[0].label.trim();
       this.$emit("modalevent", { name: "label", data: label });
       this.$emit("close");
     },