pass data to modal in vue.js app - vue.js

Question

I created a vue app in cli. And I have a List component file:
<template>
<div class="container">
<h1 class="text-center">List member</h1>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Birthday</th>
<th class="text-center">Score</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td class="text-center">{{ person.id }}</td>
<td class="text-center">{{ person.name }}</td>
<td class="text-center">{{ person.birthday }}</td>
<td class="text-center">{{ person.score }}</td>
<td class="text-center">
<b-btn v-b-modal.my-modal>Edit</b-btn>
</td>
</tr>
</tbody>
</table>
And I have modal component in this file:
<!-- Modal Component -->
<b-modal id="my-modal" ref="modal" title="Edit profile" #ok="handleOk"
#shown="clearName">
<form #submit.stop.prevent="handleSubmit">
<b-form-input type="text">{{ person.name }}</b-form-input>
<br>
<b-form-input type="text"></b-form-input>
<br>
<b-form-input type="text"></b-form-input>
</form>
</b-modal>
</div>
</div>
</template>
How can I pass data in a row (person) to modal when I click Edit button?
Thanks

Answer 1

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
<i class="bi bi-info-circle" v-on:click="setDocumentDetails(libraryItem)"></i>
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');
}

Answer 2

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.