How to get ID from conditionally rendered item in modal component?

Question

I have a conditionally-rendered notes and I want to delete specific note, depends on ID. I have no problem with deleting without modal, but my problem is that I want to delete note only when modal is accepted. There is modal component:

 <DeleteModal
    :modalVisible="modalVisible"
    :restore="modalType"
    @closeModal="modalVisible = false"
    @deleteItem="deleteNote(note.id)"
    @restoreItem="restore()"
  />

Delete method:

const deleteNote = (id) => {
  Inertia.delete(route('notes.destroy', id));
  getNotes();
};

and there is how I render notes:

 <div class="my-4" v-for="note in notesForIssue" :key="note">
                <div class="flex flex-row justify-between"></div>

                <div class="bg-gray-100 w-full min-h-16 mt-2 rounded whitespace-normal">
                  <div class="px-8 py-4">
                    <p>{{ note.text }}</p> 

                    <div class="flex flex-row items-center justify-between">
                      <div class="flex flex-row text-xs">
                        <span class="text-[#2563EB]">{{ note.updated_at }}</span>
                        <p class="ml-2">{{ __('history.by') }}</p>
                        <p class="font-bold ml-2 text-[#2563EB]">{{ note.updated_by }}</p>
                      </div>
                      <div @click="modalType=false; modalVisible=true;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

But I have no access to note.id here: @deleteItem="deleteNote(note.id)". Any ideas, how to solve this problem?

Answer 1

Try this approach.

When you click on the div, instead of set visibality of modal,

1. set selectedItem
2. set visibility

then you accept by modal, you have a `selectedItem' for delete

After delete, clear the selectedItem.