Reload marhun image in cart, record

src/components/bid-record/BidRecordList.vue

@@ -8,11 +8,7 @@
       </div>
     </div>
   </div>
-  <div
-    v-else
-    style="min-height: 70vh"
-    class="fadein animation-duration-400"
-  >
+  <div v-else style="min-height: 70vh" class="fadein animation-duration-400">
     <div v-if="isSuccess" class="grid justify-content-center">
       <div class="col-12 lg:col-11">
         <Card>
@@ -61,12 +57,14 @@
                       </tr>
                       <tr style="text-transform: uppercase">
                         <th colspan="3">Jumlah</th>
-                        <th>{{bid.total_berat}}g</th>
-                        <th>RM{{
+                        <th>{{ bid.total_berat }}g</th>
+                        <th>
+                          RM{{
                             bid.total_bidaan
                               ?.toString()
                               .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                          }}</th>
+                          }}
+                        </th>
                       </tr>
                     </tbody>
                   </table>
@@ -193,14 +191,18 @@
                   display: flex;
                   justify-content: center;
                   align-items: center;
-                  border: 1px solid rgba(0, 0, 0, 0.125);
                   min-height: 300px;
                   min-width: 300px;
                   max-height: 600px;
                   max-width: 600px;
                 "
               >
-                -gambar marhun-
+                <item-master-image-modal
+                  v-if="theData.filemarhun"
+                  v-bind:key="reloadImageComponent"
+                  v-bind:norujukan="theData.norujukan"
+                  v-bind:filemarhun_id="theData.filemarhun[0].id"
+                ></item-master-image-modal>
               </div>
               <div class="col-12 text-center lg:col-6">
                 <div class="overflow-x-auto">
@@ -276,9 +278,13 @@
 
 <script>
 import axios from "axios";
+import ItemMasterImageModal from "../list/ItemMasterImageModal.vue"
 
 export default {
   name: "BidDetail",
+  components: {
+    "item-master-image-modal": ItemMasterImageModal,
+  },
   data() {
     return {
       listBid: [],
@@ -286,6 +292,7 @@ export default {
       isSuccess: false,
       theData: "",
       date: "",
+      reloadImageComponent: 0,
       // userId: localStorage.getItem("id"),
     };
   },
@@ -315,6 +322,7 @@ export default {
           },
         })
         .then((response) => {
+          console.log(response);
           if (response.data.success == true) {
             this.isLoading = false;
             this.isSuccess = true;
@@ -330,6 +338,7 @@ export default {
     },
     marhunModal(value) {
       this.theData = value;
+      this.reloadImageComponent += 1;
       console.log(value);
     },
   },

src/components/cart/CartListNew.vue

@@ -307,6 +307,7 @@
               >
                 <item-master-image-modal
                   v-if="theSurat.filemarhun"
+                  v-bind:key="reloadImageComponent"
                   v-bind:norujukan="theSurat.norujukan"
                   v-bind:filemarhun_id="theSurat.filemarhun[0].id"
                 ></item-master-image-modal>
@@ -896,7 +897,7 @@
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
-import ItemMasterImageModal from "../list/ItemMasterImageModal.vue"
+import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 
 export default {
   emits: ["reloadComponent"],
@@ -917,6 +918,7 @@ export default {
       listItems: "",
       theSurat: "",
       tambahanBidaan: "",
+      reloadImageComponent: 0,
       jumlahBidaan: "",
       akadLelong: null,
       hargaAsas: "",
@@ -983,6 +985,8 @@ export default {
       this.tambahanBidaan = value.hargabida - value.hargaasas;
       this.jumlahBidaan = parseFloat(value.hargabida);
       this.hargaAsas = value.hargaasas;
+      this.reloadImageComponent += 1;
+
     },
     deleteItem(value) {
       this.isLoadingPadam = true;