I am having an html table as follows :
<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>
Now I want every time I select a line that line is added class isActive
Tks so much
Try like following snippet:
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>