form üzerinde değişiklik yapıp cancel ile formdan cıkınca tüm degerler varsayılana guncellenıyor. sadece select menu son secimde kalıyor.
6 saat boyunca denemedigim sey kalmadı... cözüm bulamadım.
<template>
<div v-if="isVisible" class="fixed inset-0 flex items-center overflow-auto justify-center bg-gray-900 bg-opacity-50 z-50" role="dialog" aria-labelledby="modal-title" aria-modal="true">
<div class="bg-white p-6 w-full h-screen flex flex-col">
<form @submit.prevent="save">
<div class="flex flex-row gap-6 mx-6">
<div class="basis-4/6">
<ClientOnly>
<Quill
:content="item.content"
@update:content="updateContent"
/>
</ClientOnly>
<div v-if="item.featured_image_url" class="flex justify-end mt-4">
<img :src="item.featured_image_url" alt="Current Image" class="w-[300px] h-[150px] object-cover rounded"/>
</div>
</div>
<div class="basis-2/6">
<h2 id="modal-title" class="text-2xl font-semibold mb-4">Gönderiyi Düzenle</h2>
<div class="mb-4">
<label for="category" class="block text-sm font-medium text-gray-700">Kategori</label>
<select id="category" v-model="item.category.id" class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none">
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ category.ad }}
</option>
</select>
<span v-if="errors && errors.category" class="flex items-center text-gray-900 py-1 px-1 text-[12px] font-semibold">
<Icon class="mr-1 text-red-600" name="subway:cercle-7" size="16"/>
{{ errors.category[0] }}
</span>
</div>
<div class="mb-4">
<label for="ad" class="block text-sm font-medium text-gray-700">Başlık</label>
<input
id="ad"
v-model="item.title"
@input="generateSlug"
type="text"
required
maxlength="70"
class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none"
/>
<p class="text-sm text-gray-500 mt-1">Karakter Sayısı: {{ titleCharacterCount }} / 70</p>
</div>
<div class="mb-4">
<label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
<input
id="slug"
v-model="item.slug"
type="text"
required
readonly
class="block w-full bg-gray-100 text-gray-900 py-2 px-3 focus:outline-none cursor-not-allowed"
/>
</div>
<div class="mb-4">
<label for="aciklama" class="block text-sm font-medium text-gray-700">Açıklama</label>
<textarea
id="aciklama"
v-model="item.description"
cols="30"
rows="4"
maxlength="255"
class="resize-none w-full bg-gray-100 text-gray-900 py-2.5 px-3 focus:outline-none"
></textarea>
<p class="text-sm text-gray-500 mt-1">Karakter Sayısı: {{ descriptionCharacterCount }} / 255</p>
</div>
<div class="mb-6">
<label for="file_input" class="block text-sm font-medium text-gray-700">Görsel</label>
<input
type="file"
id="file_input"
accept="image/*"
@change="handleFileChange"
class="block w-full text-sm cursor-pointer bg-gray-100 text-gray-900 file:bg-gray-900 file:text-white file:rounded file:my-2 file:py-0.5"
/>
</div>
<div class="flex justify-end space-x-2">
<button
type="button"
@click="cancel"
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
>
İptal
</button>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Kaydet
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
const props = defineProps({
isVisible: Boolean,
item: Object,
categories: Array,
errors: Object
});
const emit = defineEmits(['save', 'cancel']);
const initialItem = ref({
...props.item
});
const item = ref({ ...props.item });
const titleCharacterCount = computed(() => item.value.title.length);
const descriptionCharacterCount = computed(() => item.value.description.length);
const updateContent = (content) => {
item.value.content = content;
};
const generateSlug = () => {
const trMap = {
'ç': 'c', 'Ç': 'c',
'ğ': 'g', 'Ğ': 'g',
'ş': 's', 'Ş': 's',
'ü': 'u', 'Ü': 'u',
'ı': 'i', 'İ': 'i',
'ö': 'o', 'Ö': 'o'
};
let slug = item.value.title || '';
for (const [key, value] of Object.entries(trMap)) {
slug = slug.replace(new RegExp(key, 'g'), value);
}
item.value.slug = slug
.toLowerCase()
.replace(/[^a-z0-9 -]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-');
};
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
item.value.featured_image = file;
item.value.featured_image_url = URL.createObjectURL(file);
}
};
watch(() => props.item, (newVal) => {
initialItem.value = { ...newVal };
item.value = { ...newVal };
}, { deep: true });
watch(() => item.value.title, () => {
generateSlug();
}, { immediate: true });
const save = () => {
emit('save', item.value);
};
const cancel = () => {
item.value = { ...initialItem.value };
emit('cancel');
};
</script>