Update issue

Step 01: adding update() method with route model binding . Also file upload processing code is also added here

// at the top 
use Illuminate\Support\Facades\Storage;

public function update(Issue $issue, StoreIssueRequest $request) {
    //dd($request->all());
   
    if ($request->hasFile('image_name')) {
        // Delete the previous image if it exists
        if ($issue->image_name) {
            Storage::disk('public')->delete($issue->image_name);
        }
        $imagePath = $request->file('image_name')->store('issue_images', 'public');
    } else {
        $imagePath = $issue->image_name; // Retain the existing image if no new image is uploaded
    }

    $issue->update($request->validated());  

    $issue->image_name = $imagePath;
    $issue->save();

    return new IssueResource($issue);
} 

Step 02: Like storeIssue() method in issues.js composable we need to create updateIssue() method like below with issue as parameter along with PUT request 

const updateIssue = async (issue) => { 
    if (isLoading.value) return;

    isLoading.value = true
    validationErrors.value = {}

    const formData = new FormData();
    formData.append('title', issue.title);
    formData.append('description', issue.description);
    formData.append('client_id', issue.client_id);
    if (issue.file) {
        formData.append('image_name', issue.file);
    }
    formData.append('_method', 'PUT'); // Required for Laravel to handle PUT requests with FormData

    try {
        await axios.post(`/api/issues/${issue.id}`, formData );
        router.push({ name: 'issues.list' });
    } catch (error) {
        if (error.response?.data) {
            validationErrors.value = error.response.data.errors;
        }
    } finally {
        isLoading.value = false;
    }
}  

return { ... , updateIssue }

Step 03: Inside Edit.vue component we also need to use the updateIssue() method

const { validationErrors, isLoading, issue, getIssue, updateIssue } = useIssues()

Step 04: Also need to update form submit method with updateIssue() method

<form @submit.prevent="updateIssue(issue)">

Step 05: We need to async the onMounted hook to get the data from the asynchronus method getIssues() from issues.js composable and also need to use await for data initialization inside Edit.vue component. Also added handleFileUpload() for issue image file selection with the file input.

onMounted(async () => {
    await getClients();
    await getIssue(route.params.id);
});

const handleFileUpload = (event) => {
    issue.value.file = event.target.files[0];
}