我正在显示使用 v-for 动态生成的客户表。每行都有一个按钮,用于将客户 ID 添加到将发送到 API 的对象中。问题是,我想将 Bootstrap .success 类添加到单击的行,以便用户知道已选择客户,但我只能实现表中的所有行都获得 .success 类。另外,我希望当用户单击另一个客户时,所选客户会丢失 .success 类。 这是我的代码:
<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);
}
}
谢谢!
最佳答案
将 success
类绑定(bind)到基于 selectedCustomer
值的行应该可以帮助您实现您正在寻找的目标。像这样的东西,未经测试:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers" v-bind:class="{'success': (customer.id == selectedCustomer)}">
<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>
关于javascript - Vue.js - 在 v-for 中更改单个表行的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41630831/