I have individual buttons next to each row, with unique data entries in the database. When clicking on a button, I want specific information to appear in a Bootstrap Modal. However, I am facing challenges ensuring that Vue updates correctly with each click. Below is the code snippet for the Modal:
<tr v-for="click in clicks">
<td><button type="button" @click="returnIndex(click)" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">{{ $t('common.moreDetails') | capitalize }}</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
{{ $t('entity.property1') | capitalize }}
{{ entity.somePropertyName1 }}
</div>
<div class="col-md-3">
{{ $t('entity.property2') | capitalize }}
{{ entity.somePropertyName2 }}
</div>
<div class="col-md-3">
{{ $t('entity.property3') | capitalize }}
{{ entity.somePropertyName3 }}
</div>
<div class="col-md-3">
{{ $t('entity.property4') | capitalize }}
{{ entity.somePropertyName4 }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Within my methods section, I have implemented the following:
returnIndex(click) {
return click.status = true;
}
This method was inspired by this answer on SO. Despite this implementation, when clicking on different entities, the same property value is displayed instead of refreshing with new data as intended.
To illustrate further, here are some images:
https://i.sstatic.net/EbKnR.png
Currently, all 5000 entries show the value "test", although it should only appear for one entry. The goal is to display distinct values for each entry upon clicking the respective button.
Edit: It is noted that the "test" value should be under "property1/2/3/4," which has not been successfully implemented yet, so please disregard this for now.