Vue.js - 更改v表中的單個表格行的類別

Question

我正在顯示使用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); 
    } 
} 

謝謝！

Answer 1

綁定success類的行基於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>