title: How do I highlight a table row on click in Vuejs?
body: <p>I would like to highlight a table row on '@click' in Vuejs. Currently I'm having an issue getting this to work.</p>
  
  <p>Here is my html template where I'm binding class active to the Boolean 'isActive'.</p>
  
  <pre><code>&lt;table
        class="paginatedTable-table hide-table"&gt;
        &lt;thead class="paginatedTable-table-head"&gt;
          &lt;tr :class="{active: isActive}" class="paginatedTable-table-head-row"&gt;
            &lt;th
              v-for="(column, key) in columns"
              :key="key"
              :class="column.align"
              class="paginatedTable-table-head-row-header"
              @click="sortTable(column)"&gt;
              {{ column.label }}
              &lt;i
                v-if="sortOptions.currentSortColumn === column.field"
                :class="sortOptions.sortAscending ? icons.up : icons.down"
                class="sort-icon" /&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>I'm declaring the isActive in the data function and setting to false.</p>
  
  <pre><code>data() {
      return {
        width: '100%',
        'marginLeft': '20px',
        rowClicked: false,
        filteredData: this.dataDetails,
        isActive: false,
  </code></pre>
  
  <p>Function for button click where I'm setting isActive to true</p>
  
  <pre><code>async selectRow(detail) {
        this.isActive = true;
        this.width = '72%';
        this.rowClicked = true;
  </code></pre>
  
  <p>This part I'm not so sure about. Here I'm setting the Css in Sass.</p>
  
  <pre><code> tr:not(.filters):not(.pagination-row) {
        background-color: $white;
        &amp;.active{
          background-color: $lc_lightPeriwinkle;
        }
  </code></pre>