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  v-for="note in notesForIssue" :key="note">
                <div ></div>

                <div >
                  <div >
                    <p>{{ note.text }}</p> 

                    <div >
                      <div >
                        <span >{{ note.updated_at }}</span>
                        <p >{{ __('history.by') }}</p>
                        <p >{{ 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?

CodePudding user response：

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.

CodePudding user response：

First the key attribute is not accpet object type variable. Second maybe you should check what is notesForIssue first ,then find out why you can't access note.id