I have a dynamic table displaying customers generated using the v-for directive. Each row contains a button that adds the customer ID to an object sent to the API. I want to apply the Bootstrap .success class to only the clicked row, indicating it has been selected. Currently, all rows in the table receive the .success class. Additionally, when a user clicks on another customer, I would like the previously selected customer to lose the .success class. Here is the code snippet:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
export default {
data(){
return {
customers: [],
selectedCustomer: ''
}
},
methods: {
selectCustomer(id, clicked){
this.selectedCustomer = id;
console.log(this.selectedCustomer);
}
}
Appreciate any help on this matter!