Does anyone know how to implement checkboxes in each row using Vue.js? I need to pass the checked items to a function for further processing, but my attempts so far have not been successful. Below is the code snippet along with the output from an API.
The selected IDs should be passed to the "on()" function.
<va-card style="margin-top:20px">
<table style="width:100%;border:2px">
<thead>
<tr>
<th>Pole ID</th>
<th>Address</th>
<th>
<label class="form-checkbox">
<input type="checkbox" v-model="selectPole" >
<i class="form-icon"></i>
</label>
</th>
</tr>
</thead>
<tbody>
<tr v-for="pole in streetInfo">
<td style="font-weight:bold">{{pole.pole}}</td>
<td>{{pole.address}}</td>
<td>
<label class="form-checkbox">
<input type="checkbox" :value="pole.pole" v-model="selectedStreetLight">
<i class="form-icon"></i>
</label>
</td>
</tr>
<va-button @click="On()" class="my-0">ON</va-button>
<va-button @click="Off()" class="my-0">OFF</va-button>
</tbody>
</table>
</va-table>
</va-card>
//API Data Output
[
{
"address": "Jayanagar 4th Block Banglore",
"pole": "BNG-JAY-137-003",
"select":false
},
{
"address": "Jayanagar 5th Block Banglore",
"pole": "BNG-JAY-137-004",
"select":false
},
{
"address": "Jayanagar 6th Block Banglore",
"pole": "BNG-JAY-137-005",
"select":false
}
]