I am facing an issue with a table that contains checkboxes in every row. I want to trigger some logic when a checkbox is clicked. In some cases, I need to tick multiple rows when a checkbox is clicked, so I have set the checkboxes as readonly and handle their selection in the script section. Below is my table structure:
<div
v-for="file in files"
:key="file.entry.name">
<v-list-item style="height: 40px;">
<v-list-item-content class="text-left">
<div class="wrapper">
<div class="checkbox">
<v-checkbox
readonly
@click="selectCorrespondingFiles"
v-model="file.isSelected">
</v-checkbox>
</div>
<div class="title">
<v-list-item-title
style="font-size: 16px"
v-text="file.entry.name">
</v-list-item-title>
</div>
</div>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</div>
However, I noticed that my method is being called twice whenever I click on a checkbox:
selectCorrespondingFiles() {
console.log('selectCorrespondingFiles');
....
},
I cannot figure out why the code is executing twice on each click. Any assistance would be greatly appreciated.