Modal delete confirmation with BootstrapVue

Can you show us some code?

Is the data being pulled from a table? If so could you not pass the data to the modal such as ID so that you only require one modal for deleting multiple lines?

Without seeing your view & controller i'm going out on a limb but could you do something like:-

<a href="javascript:void(0)" id="delete" data-toggle="delete-modal" data-target="#delete-modal" data-id="{{ $yourvariable->id }}" class="yourButtonClass">Delete</a>

Hello,

Here the current code:

Controller:

public function destroy(Sector $sector)
{
    $sector->delete();
    return redirect(route('sectors.index'));
}

Blade view with a button to directly delete the sector (without modal, therefore without confirmation):

<form action="{{ route('sectors.destroy', $sector) }}" method="post">
    @method('delete')
    @csrf
    <input class="btn btn-danger" type="submit" value="Delete" />    
</form>

Using regular Bootstrap modal window this view becomes:

<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteConfirmation">
    Delete
</button>

<!-- Modal -->
<div class="modal fade" id="deleteConfirmation" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmationLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteConfirmationLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this sector?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form action="{{ route('sectors.destroy', $sector) }}" method="post">
                    @method('delete') 
                    @csrf
                    <input class="btn btn-danger" type="submit" value="Delete" />
                </form>
            </div>
        </div>
    </div>
</div>

And this quite big code for the modal window, that is repeated in each of the blade template, is what I would like to replace by a BootstrapVue modal with following short code (coming from the above BootstrapVue link):

<div>
    <b-button v-b-modal.modal-1>Delete</b-button>

    <b-modal id="modal-1" title="Confirmation">
        <p class="my-4">Are you sure you want to delete this sector?</p>
    </b-modal>
</div>

But what I don't see is how to send the delete method (that is handled by the form in both first above solution) when the OK button of the BootstrapVue modal window is pressed.

Thank you

Have you considered a global event bus? Basically, a separate Vue instance that acts as a go-between to allow events to be emitted and listened by disparate components.

https://alligator.io/vuejs/global-event-bus/