diff --git a/src/components/List.vue b/src/components/List.vue
index 3afadb4..10387be 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -1,301 +1,136 @@
 <template>
   <Navbar />
-  <div class="spinner-border" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
-  </div>
-  <div v-else class="container">
-    <button
-      class="btn btn-secondary float-start"
-      style="margin: 5px"
-      onclick="history.back()"
-    >
-      Back <i class="bi bi-backspace-fill"></i>
-    </button>
-    <h1>List</h1>
-    <p>Tarikh Lelong: {{ lelong_details.tarikh_lelong }}</p>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
-      <select class="form-select">
-        <option selected value="1">Ar-Rahn Kota Bharu 2</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-      </select>
-      <button type="submit" class="btn btn-primary">Cari</button>
-    </div>
-    <div class="row">
-      <div class="col-9">
-        <div class="container">
-          <div class="row clearfix">
-            <div
-              v-for="sag in sags"
-              :key="sag.id"
-              class="col-lg-4 col-md-4 col-sm-12"
-              style="margin: 10px 0px"
-            >
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">{{ sag.norujukan }}</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM{{ sag.hargaasas }}</li>
-                      <li class="old_price">{{ sag.marhun }}</li>
-                      <li class="old_price">{{ sag.berat }}g</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          data-bs-toggle="modal"
-                          data-bs-target="#bidaModal"
-                          @click="clickModal(sag)"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Enter <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-3">
-        <div class="ibox" style="border: solid 0.5px">
-          <div class="ibox-content">
-            <p class="font-bold">Info</p>
-            <hr />
-            <div>
-              <!-- <a href="#" class="product-name"> Product 1</a> -->
-              <div class="small m-t-xs">
-                <div class="d-flex justify-content-between">
-                  <p class="mb-0">Cawangan</p>
-                  <p class="mb-0">Kota Bharu 2</p>
-                </div>
-              </div>
-              <hr />
-              <div class="small m-t-xs">
-                <div class="d-flex justify-content-between">
-                  <p class="mb-0">Bilangan Lelongan</p>
-                  <p class="mb-0">120 SAG</p>
-                </div>
-              </div>
-              <hr />
-              <div class="small m-t-xs">
-                <div class="d-flex justify-content-between">
-                  <p class="mb-0">Masa Mula</p>
-                  <p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
-                </div>
-              </div>
-              <hr />
-              <div class="small m-t-xs">
-                <div class="d-flex justify-content-between">
-                  <p class="mb-0">Masa Tamat</p>
-                  <p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
-                </div>
-              </div>
-
-              <!-- <div class="small m-t-xs">
-                  Masa Tamat Lelongan: 00:15:29
-                </div> -->
-              <!-- <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div> -->
-            </div>
-            <!-- <hr /> -->
-            <!-- <div>
-                <a href="#" class="product-name"> Product 2</a>
-                <div class="small m-t-xs">
-                  Many desktop publishing packages and web page editors now.
-                </div>
-                <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div>
-              </div> -->
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="modal fade"
-      id="bidaModal"
-      tabindex="-1"
-      aria-labelledby="bidaModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-      data-bs-keyboard="false"
-    >
-      <!-- <form @submit.prevent="submit"> -->
-      <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="bidaModalLabel">
-              {{ norujukan.norujukan }} : {{ norujukan.id }}
-            </h5>
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-
-          <div class="modal-body">
-            <div class="row m-2">
-              <!-- <div class="col-2 border"></div> -->
-              <div class="col">
-                <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5>
-                <p>Marhun: {{ norujukan.marhun }}</p>
-                <table class="table">
-                  <thead>
-                    <tr>
-                      <th scope="col">No</th>
-                      <th scope="col">Jenis Marhun</th>
-                      <th scope="col">Karat</th>
-                      <th scope="col">Berat</th>
-                      <th scope="col">Nota</th>
-                      <th scope="col">Harga Asas</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
-                      <td>{{ index + 1 }}</td>
-                      <td>{{ marhun.marhun }}</td>
-                      <td>{{ marhun.karat }}</td>
-                      <td>{{ marhun.berat }}g</td>
-                      <td>{{ marhun.nota }}</td>
-                      <td>RM{{ marhun.hargaasas }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-                <div class="row">
-                  <div class="input-group mb-3">
-                    <label class="col-form-label me-2"
-                      >Tambahan Harga Bida</label
-                    >
-                    <span class="input-group-text">RM</span>
-                    <input type="text" id="tambahanbida" class="form-control" />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="input-group mb-3">
-                    <label class="col-form-label me-2">Jumlah Harga Bida</label>
-                    <span class="input-group-text">RM</span>
-                    <input
-                      v-model="form.hargabida"
-                      type="text"
-                      class="form-control"
-                      id="{{marhun.marhuns}}"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="submit"
-              class="btn btn-danger me-2"
-              data-bs-dismiss="modal"
-            >
-              Batal
-            </button>
-            <button type="submit" class="btn btn-success" @click="addToCart()">
-              Add to Cart
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- </form> -->
-    </div>
+  <button class="btn m-2 btn-info" @click="forceRerender">Reload Component <i class="bi bi-arrow-down"></i></button>
+  <!-- <router-view {{Modal}}><button class="btn btn-primary">sdsd</button></router-view> -->
+  <!-- <Modal /> -->
+  <Senarai :key="componentKey"/>
   <Footer />
-  </div>
-
 </template>
 
 <script>
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
+import Senarai from "./list/Senarai.vue";
+// import Modal from "./Modal.vue"
 import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, minLength, maxLength, between } from "@vuelidate/validators";
+// import Vue from 'vue';
+// Vue.forceUpdate();
 
 export default {
+  data() {
+    return {
+      componentKey: 0,
+    };
+  },
   components: {
     Navbar,
     Footer,
-  },
-  data() {
-    return {
-      loading: false,
-      lelong_details: [],
-      sags: [],
-      norujukan: "",
-      marhuns: [],
-      form: {
-        user_id: localStorage.getItem("id"),
-        lelongbid_id: "",
-        hargabida: "",
-      },
-    };
-  },
-  mounted: function () {
-    this.liveData();
+    Senarai,
+    // Modal,
   },
   methods: {
-    liveData() {
-      this.loading = true;
-      axios
-        .get("/lelongDetails/cawangan", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-          params: {
-            caw_id: 3,
-          },
-        })
-        .then((response) => {
-          this.lelong_details = response.data[0];
-          this.response = response.data[0].lelongbid;
-          this.sags = this.response;
-          this.loading = false;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    clickModal(norujukan) {
-      this.norujukan = norujukan;
-      this.marhuns = this.norujukan.lelongbidmarhun;
-      this.form.lelongbid_id = this.norujukan.id;
-
-      // this.try = data().form.lelongbid_id
-      // let carName = this.try;
-      // document.getElementById("demo").innerHTML = carName;
-      // console.log(this.form.lelongbid_id);
-      // console.log(this.marhuns);
-    },
-    addToCart() {
-      axios
-        .post("/addToCart", this.form, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          location.reload();
-          // bidaModal.hide();
-          // call Cart component to refresh
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    forceRerender() {
+      this.componentKey += 1;
     },
   },
+  // data() {
+  //   return {
+  //     v$: useVuelidate(),
+  //     loading: false,
+  //     tambahabError: false,
+  //     errors: [],
+  //     cawangan: "1",
+  //     lelong_details: [],
+  //     sags: [],
+  //     norujukan: "",
+  //     marhuns: "",
+  //     form: {
+  //       user_id: localStorage.getItem("id"),
+  //       lelongbid_id: "",
+  //       test: "",
+  //       hargabida: "",
+  //     },
+  //     myModal: null,
+  //     cuba: "",
+  //     // hargabida2: 2 + " this.form.test",
+  //   };
+  // },
+  // validations: {
+  //   cuba: {
+  //     required,
+  //     minLength: minLength(3),
+  //   },
+  // },
+  // computed: {
+  //   numberSag() {
+  //     return this.sags.length;
+  //   },
+  // },
+  // mounted: function () {
+  //   this.liveData();
+  // },
+  // methods: {
+  //   liveData() {
+  //     this.loading = true;
+  //     axios
+  //       .get("/lelongDetails/cawangan", {
+  //         headers: {
+  //           Authorization: "Bearer " + localStorage.getItem("token"),
+  //         },
+  //         params: {
+  //           caw_id: "3",
+  //         },
+  //       })
+  //       .then((response) => {
+  //         this.lelong_details = response.data[0];
+  //         // console.log(this.lelong_details);
+  //         this.response = response.data[0].lelongbid;
+  //         this.sags = this.response;
+  //         this.loading = false;
+  //         // this.form.hargabida = this.form.test + 1;
+  //       })
+  //       .catch((error) => {
+  //         console.log(error);
+  //         this.lelong_details = [null];
+  //         // this.loading = false;
+  //       });
+  //   },
+  //   clickModal(norujukan) {
+  //     this.norujukan = norujukan;
+  //     this.marhuns = this.norujukan.lelongbidmarhun;
+  //     this.form.lelongbid_id = this.norujukan.id;
+  //     this.form.test = 1;
+  //     this.form.hargabida =
+  //       parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
+  //   },
+  //   calcTotal() {
+  //     this.form.hargabida =
+  //       parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
+  //     // console.log(this.norujukan);
+  //     // console.log(value);
+  //   },
+
+  //   addToCart() {
+  //     axios
+  //       .post("/addToCart", this.form, {
+  //         headers: {
+  //           Authorization: "Bearer " + localStorage.getItem("token"),
+  //         },
+  //       })
+  //       .then((response) => {
+  //         console.log(response);
+  //         // this.$forceUpdate();
+  //         // location.reload();
+  //         // this.liveData();
+  //         // this.myModal._isShown == false;
+  //         // call Cart component to refresh
+  //       })
+  //       .catch((error) => {
+  //         console.log(error);
+  //       });
+  //   },
+  // },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
new file mode 100644
index 0000000..ba279fe
--- /dev/null
+++ b/src/components/list/Senarai.vue
@@ -0,0 +1,422 @@
+<template>
+  <div
+    v-if="loading"
+    style="min-height: 70vh; display: grid; place-items: center"
+  >
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+  <div v-else class="container">
+    <button
+      class="btn btn-secondary float-start"
+      style="margin: 5px"
+      onclick="history.back()"
+    >
+      Back <i class="bi bi-backspace-fill"></i>
+    </button>
+    <h1>Senarai <i class="bi bi-card-list"></i></h1>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
+      <select class="form-select" v-model="cawangan">
+        <option selected value="1">Ar-Rahn Kota Bharu 2</option>
+        <!-- <option v-for="sag in sags" :key="sag.id" value="sag.id">Two</option> -->
+        <!-- <option value="3">Three</option> -->
+      </select>
+      <button type="submit" class="btn btn-primary">Cari</button>
+    </div>
+    <div class="row">
+      <div class="col-9">
+        <div class="container">
+          <div class="d-flex">
+            <div class="input-group mb-3">
+              <span class="input-group-text">Sort By</span>
+              <button class="btn btn-outline-primary" checked>Default</button>
+              <button class="btn btn-outline-primary">
+                Ascending Harga Bida
+              </button>
+              <button class="btn btn-outline-primary">
+                Descending Harga Bida
+              </button>
+            </div>
+          </div>
+          <div class="row clearfix">
+            <div
+              v-for="sag in sags"
+              :key="sag.id"
+              class="col-lg-4 col-md-4 col-sm-12"
+              style="margin: 10px 0px"
+            >
+              <div class="card product_item" style="padding: 15px">
+                <div class="body">
+                  <div class="product_details">
+                    <h6 class="text-primary">
+                      {{ sag.norujukan }}
+                    </h6>
+                    <ul class="product_price list-unstyled">
+                      <li class="old_price">{{ sag.marhun }}</li>
+                      <li class="old_price">{{ sag.berat }}g</li>
+                      <li class="old_price">
+                        <b>RM{{ sag.hargaasas }}</b>
+                      </li>
+                    </ul>
+                    <div class="cp_img">
+                      <div class="hover">
+                        <a
+                          data-bs-toggle="modal"
+                          data-bs-target="#bidaModal"
+                          @click="clickModal(sag)"
+                          class="btn btn-primary btn-sm waves-effect"
+                          >Enter <i class="zmdi zmdi-shopping-cart"></i
+                        ></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-3">
+        <form>
+          <div class="ibox" style="border: solid 0.5px">
+            <div class="ibox-content">
+              <p class="font-bold">Info</p>
+              <hr />
+              <div>
+                <!-- <a href="#" class="product-name"> Product 1</a> -->
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Cawangan</p>
+                    <p class="mb-0">{{ lelong_details.lokasi }}</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Bilangan Lelongan</p>
+                    <p class="mb-0">{{ this.sags.length }} SAG</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Masa Mula</p>
+                    <p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Masa Tamat</p>
+                    <p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
+                  </div>
+                </div>
+
+                <!-- <div class="small m-t-xs">
+                  Masa Tamat Lelongan: 00:15:29
+                </div> -->
+                <!-- <div class="m-t text-righ">
+                  <a href="#" class="btn btn-xs btn-outline btn-primary"
+                    >Info <i class="fa fa-long-arrow-right"></i>
+                  </a>
+                </div> -->
+              </div>
+              <hr />
+              <input
+                type="text"
+                class="form-control"
+                v-model="v$.cuba.$model"
+              />
+              <!-- <hr /> -->
+              <!-- <div>
+                <a href="#" class="product-name"> Product 2</a>
+                <div class="small m-t-xs">
+                  Many desktop publishing packages and web page editors now.
+                </div>
+                <div class="m-t text-righ">
+                  <a href="#" class="btn btn-xs btn-outline btn-primary"
+                    >Info <i class="fa fa-long-arrow-right"></i>
+                  </a>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- modal marhun -->
+    <div
+      class="modal fade"
+      id="bidaModal"
+      tabindex="-1"
+      aria-labelledby="bidaModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+    >
+      <!-- <form @submit.prevent="validate"> -->
+      <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="bidaModalLabel">
+              {{ norujukan.norujukan }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <div class="row m-2">
+              <!-- <div class="col-2 border"></div> -->
+              <div class="col">
+                <!-- <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5> -->
+                <p>Marhun: {{ norujukan.marhun }}</p>
+                <p>Jumlah Berat: {{ norujukan.berat }}g</p>
+                <table class="table table-bordered">
+                  <!-- <thead class="table-light">
+                    <tr>
+                      <th scope="col">No</th>
+                      <th scope="col">Jenis Marhun</th>
+                      <th scope="col">Karat</th>
+                      <th scope="col">Berat</th>
+                      <th scope="col">Nota</th>
+                      <th scope="col">Harga Asas</th>
+                    </tr>
+                  </thead> -->
+                  <!-- <tbody >
+                  </tbody> -->
+                  <tbody>
+                    <tr class="table-light">
+                      <th scope="col">No</th>
+                      <th scope="col">Jenis Marhun</th>
+                      <th scope="col">Karat</th>
+                      <th scope="col">Berat</th>
+                      <th scope="col">Nota</th>
+                      <th scope="col">Harga Asas</th>
+                    </tr>
+                    <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ marhun.marhun }}</td>
+                      <td>{{ marhun.karat }}</td>
+                      <td>{{ marhun.berat }}g</td>
+                      <td>{{ marhun.nota }}</td>
+                      <td>RM{{ marhun.hargaasas }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label text-end"
+                      >Jumlah Harga Asas</label
+                    >
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <!-- <input
+                        type="text"
+                        class="form-control"
+                        disabled
+                      /> -->
+                      <div
+                        style="background-color: #e9ecef"
+                        class="form-control text-start justify-content-start"
+                        disabled
+                      >
+                        {{ norujukan.hargaasas }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label">Tambahan Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        v-model="form.test"
+                        type="text"
+                        id="tambahanbida"
+                        class="form-control"
+                        @change="calcTotal()"
+                      />
+                      <div
+                        style="font-size: 10px"
+                        class="fst-italic text-danger"
+                      >
+                        *Minimum tambahan harga bida adalah RM1
+                      </div>
+                      <div
+                        class="invalid-feedback"
+                        id="feedback-1"
+                        v-if="errors[0]"
+                      >
+                        {{ errors[0].message }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label">Jumlah Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        v-model="form.hargabida"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-danger me-2"
+              data-bs-dismiss="modal"
+            >
+              Batal
+            </button>
+            <button type="submit" class="btn btn-success" @click="addToCart()">
+              Add to Cart
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- </form> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import Senarai from "../list/Senarai.vue";
+import { required, minLength, maxLength, between } from "@vuelidate/validators";
+export default {
+  components: {
+    // Navbar,
+    // Footer,
+    Senarai,
+  },
+  data() {
+    return {
+      v$: useVuelidate(),
+      loading: false,
+      tambahabError: false,
+      errors: [],
+      cawangan: "1",
+      lelong_details: [],
+      sags: [],
+      norujukan: "",
+      marhuns: "",
+      componentKey: 0,
+      form: {
+        user_id: localStorage.getItem("id"),
+        lelongbid_id: "",
+        test: "",
+        hargabida: "",
+      },
+      myModal: null,
+      cuba: "",
+      // hargabida2: 2 + " this.form.test",
+    };
+  },
+  validations: {
+    cuba: {
+      required,
+      minLength: minLength(3),
+    },
+  },
+  computed: {
+    numberSag() {
+      return this.sags.length;
+    },
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.loading = true;
+      axios
+        .get("/lelongDetails/cawangan", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            caw_id: "3",
+          },
+        })
+        .then((response) => {
+          this.lelong_details = response.data[0];
+          // console.log(this.lelong_details);
+          this.response = response.data[0].lelongbid;
+          this.sags = this.response;
+          this.loading = false;
+          // this.form.hargabida = this.form.test + 1;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.lelong_details = [null];
+          // this.loading = false;
+        });
+    },
+    clickModal(norujukan) {
+      this.norujukan = norujukan;
+      this.marhuns = this.norujukan.lelongbidmarhun;
+      this.form.lelongbid_id = this.norujukan.id;
+      this.form.test = 1;
+      this.form.hargabida =
+        parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
+    },
+    calcTotal() {
+      this.form.hargabida =
+        parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
+      // console.log(this.norujukan);
+      // console.log(value);
+    },
+    // forceRerender() {
+    //   this.componentKey += 1;
+    // },
+    addToCart() {
+      axios
+        .post("/addToCart", this.form, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          // this.Senarai.forceRerender();
+          //   this.componentKey += 1;
+          //   $ref.foo.forceRerender();
+
+          location.reload();
+          // this.liveData();
+          // this.myModal._isShown == false;
+          // call Cart component to refresh
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file