[Vuejs]-Pass data to modal in vue.js app

in my case i fixed this with bootstrap modal and JQuery

1- HTML Modal

<div class="modal fade bd-example-modal-lg" id="document-details-modal" tabindex="-1" aria-labelledby="document-details-modal" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">modal-title-details-document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-title</div>
                            <span id="document-details-document-title"></span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-source-info</div>
                            <span id="document-details-document-source-info"></span>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-author</div>
                            <span id="document-details-document-author"></span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-language</div>
                            <span id="document-details-document-language"></span>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-description</div>
                            <span id="document-details-document-description"></span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-3">
                            <div class="label">label-library-file-comments</div>
                            <span id="document-details-document-comments"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="text-center">
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">ok</button>
                </div>
            </div>
        </div>
    </div>
</div>

2- Vuejs Call

<a href="#"><i class="bi bi-info-circle" v-on:click="setDocumentDetails(libraryItem)"></i></a>

3- Vuejs Funcation

            setDocumentDetails: function (libraryItem) {
               
                                $('#document-details-document-title').text(libraryItem.Title);
                                $('#document-details-document-description').text(libraryItem.Description);
                                $('#document-details-document-source-info').text(libraryItem.SourceInfo);
                                $('#document-details-document-comments').text(libraryItem.Comments);
                                $('#document-details-document-author').text(libraryItem.Author);
                                $('#document-details-document-language').text(libraryItem.Language);
                                $('#document-details-modal').modal('show');

            }

I am not sure this will work, and even less sure that this is elegant, but if they are in the same file, you could try having a currentPerson property that you set to person when this button is clicked. Like

<b-btn @click="currentPerson = person" v-b-modal.my-modal>Edit</b-btn>

and then just use {{currentPerson.name}} in the modal.