From 3ef626d97a4c4c1985a98d9a8b77a3a125ca678b Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Mon, 27 Oct 2025 21:47:36 +0700
Subject: [PATCH] Update PhotoUploader.vue

---
 resources/js/components/PhotoUploader.vue | 24 ++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/PhotoUploader.vue b/resources/js/components/PhotoUploader.vue
index 26d8b0b..32509cf 100644
--- a/resources/js/components/PhotoUploader.vue
+++ b/resources/js/components/PhotoUploader.vue
@@ -195,7 +195,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onUnmounted } from 'vue';
+import { ref, watch, onUnmounted, nextTick } from 'vue';
 import axios from 'axios';
 
 const props = defineProps({
@@ -211,7 +211,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'error']);
 
-const uploadedImages = ref([...props.modelValue]);
+const uploadedImages = ref([]);
 const showUploadMenu = ref(false);
 const fileInput = ref(null);
 const uploadLoading = ref(false);
@@ -224,19 +224,21 @@ const video = ref(null);
 const canvas = ref(null);
 let stream = null;
 
-// Watch for external changes to modelValue
+// Initialize once
+if (props.modelValue && props.modelValue.length > 0) {
+  uploadedImages.value = [...props.modelValue];
+}
+
+// Only watch for external changes, no bidirectional binding
 watch(
   () => props.modelValue,
   (newVal) => {
-    uploadedImages.value = [...newVal];
+    if (JSON.stringify(newVal) !== JSON.stringify(uploadedImages.value)) {
+      uploadedImages.value = newVal ? [...newVal] : [];
+    }
   }
 );
 
-// Watch for internal changes to uploadedImages
-watch(uploadedImages, (newVal) => {
-  emit('update:modelValue', newVal);
-});
-
 const toggleUploadMenu = () => {
   if (!uploadLoading.value && uploadedImages.value.length < props.maxPhotos) {
     showUploadMenu.value = !showUploadMenu.value;
@@ -353,6 +355,8 @@ const uploadFile = async (file) => {
       },
     });
     uploadedImages.value.push(response.data);
+    // Emit update after adding image
+    emit('update:modelValue', [...uploadedImages.value]);
   } catch (error) {
     console.error('Upload error:', error);
     uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@@ -366,6 +370,8 @@ const removeImage = async (id) => {
       headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
     });
     uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
+    // Emit update after removing image
+    emit('update:modelValue', [...uploadedImages.value]);
   } catch (error) {
     uploadError.value = 'Gagal menghapus foto';
     emit('error', uploadError.value);