Estoy teniendo una tabla html de la siguiente manera:
<tbody> <tr v-for="employee in employees" :key="employee.EmployeeId" @dblclick="rowOnDblClick(employee.EmployeeId)" @click="rowOnClick(employee.EmployeeId)" :class="{rowSelected: rowSelected.status}" > <td>{{employee.EmployeeCode}}</td> <td>{{employee.FullName}}</td> <td>{{employee.GenderName}}</td> <td style="text-align: center;">{{employee.DateOfBirth|dateofbirth}}</td> <td>{{employee.PhoneNumber}}</td> <td :title="employee.Email">{{employee.Email}}</td> <td>{{employee.PositionName}}</td> <td>{{employee.DepartmentName}}</td> <td style="text-align: right;">{{employee.Salary|money}}</td> <td>{{employee.WorkStatus|status}}</td> </tr> </tbody> Ahora quiero que cada vez que seleccione una línea esa línea se agregue clase isActive
muchas gracias
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { employees: [{EmployeeId: 1, EmployeeCode: 1, FullName: 'aa bb', GenderName: 'm'}, {EmployeeId: 2, EmployeeCode: 2, FullName: 'cc dd', GenderName: 'm'}, {EmployeeId: 3, EmployeeCode: 3, FullName: 'ee ff', GenderName: 'm'}], selected: null } }, methods: { rowOnClick(id) { this.selected = id } } }) Vue.config.productionTip = false Vue.config.devtools = false .active { background-color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tbody> <tr v-for="employee in employees" :key="employee.EmployeeId" @click="rowOnClick(employee.EmployeeId)" :class="selected === employee.EmployeeId && 'active'" > <td>{{employee.EmployeeCode}}</td> <td>{{employee.FullName}}</td> <td>{{employee.GenderName}}</td> <!--<td style="text-align: center;">{{employee.DateOfBirth|dateofbirth}}</td> <td>{{employee.PhoneNumber}}</td> <td :title="employee.Email">{{employee.Email}}</td> <td>{{employee.PositionName}}</td> <td>{{employee.DepartmentName}}</td> <td style="text-align: right;">{{employee.Salary|money}}</td> <td>{{employee.WorkStatus|status}}</td>--> </tr> </tbody> </table> </div>