How do I go about adding a specific class to every row within a Vue.js table?

I have an html table structured like this :

           <tbody>
                <tr
                  v-for="employee in employees"
                 :key="employee.EmployeeId"
                 @dblclick="rowOnDblClick(employee.EmployeeId)"
                 @click="rowOnClick(employee.EmployeeId)"
                 :class="{rowSelected: rowSelected.status, isActive: isActive}"
                 >
                    <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>

What I would like to achieve is that every time a line is selected, the class isActive is added to that line.
Thank you!

Answer №1

Check out the code snippet below:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

Generate a dynamic list using NG-Repeat with changing classes

Is there a way to print each item that matches the index of the first loop as an li element with different classes? For instance, having li elements with classes like cat1_li, cat2_li, cat3_li for each respective loop iteration. I'm struggling with ...

VueJS is preventing the closure of the modal through jQuery

Within the index.blade.php page, I have the following code snippet: <div id="books_listing" class="container"> <div class="alert alert-success" role="alert"> <p>Book suggestions has been enabled.</p> <span cl ...

How to modify ID data with AngularJS ng-repeat

I am currently searching for a solution to easily modify an ID within a repeated ng-structure. This scenario involves having a customer table with unique customer IDs, which are then utilized in another table related to orders. When I retrieve data from th ...

Capture the item selected from the dropdown using ng-model to retrieve the name instead of the

I need help getting the name/text/html of the selected option in a dropdown using angular.js, rather than just its value. Currently, I have this setup which retrieves the value: Here is my HTML code snippet <select class="SelectCar" ng-model="Selected ...

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

Mastering data extraction from JSON using React JS (with Axios)

Being new to ReactJS and axios, I am facing a challenge. I need to iterate through JSON data and extract values where the key is a number (e.g. 0, 1, 2...). However, I am unsure how to implement this in my code since the server provides dynamic JSON data ...

Bringing in an SVG file as a React component

When importing an SVG into React as a Component, I am facing an issue where the CSS classes are wrapped in style tags, causing an error upon import. Removing the CSS from the style tags allows the SVG to load, but it loses its additional styling. I want t ...

Enabling direct access to sub-folder files within the root of npm imports

A new npm module I am creating has a specific folder structure: lib/ one-icon.jsx another-icon.jsx /* about 100 more */ package.json I would like to import these files in this manner: import OneIcon from 'icon-package/one-icon'; However ...

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

Leverage JavaScript libraries utilizing namespaces within your Angular application

I have a unique JavaScript library that includes functions organized within namespaces. For example: var testNamespace = { insideFunction: function(str) { alert(atr); } }; Now, I am trying to integrate these functions into my Angular app.c ...

Problem with jQuery's UI autocomplete functionality

Implementing jQ UI Autocomplete with multiple values Below is how my function is structured: mailto_input.bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { ...

Custom component is experiencing issues with radio buttons not maintaining the checked state

Currently, I am facing an issue where checking either Male or Female results in both options getting checked. This problem didn't occur with the previous v-model approach. In addition, I would appreciate guidance on whether it is possible to include ...

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

Comparing document.getElementById and the jQuery $() function

Is this: var contents = document.getElementById('contents'); The equivalent to this: var contents = $('#contents'); Considering that jQuery is present? ...

Looking for guidance on utilizing pushState and handling onpopstate events?

By using ajax, I am able to load specific page content without refreshing the entire page. In order to make the back button functionality work, I utilize pushState and onpopstate as shown below: function get_page(args){ .... $.ajax({ url ...

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

Connecting the input[date] and Moment.js in AngularJS

For the purpose of formulating a question, I have prepared a simplified example: ... <input type="date" ng-model="selectedMoment" /> ... <script> angular.module('dateInputExample', []) .controller('DateController', [& ...