Change the background color of a particular row in a table using Vue.js to be red

Question

Change the background color of a particular row in a table using Vue.js to be red

I am having an issue with a regular table - when I click on a specific row, I want only that row to turn red.

Below is the code snippet that I have attempted:

<tr role="row" v-for="(proxy, key) in this.ProxiesList" @click.prevent="this.BackGroundRed = !this.BackGroundRed" v-bind:style="[this.BackGroundRed ? 'background-color:red' : '']">

<td class="sorting_1"><a href="#"><span class="inv-number">{{ key + 1 }}</span></a></td>
<td>
<div class="d-flex">
<div class="usr-img-frame mr-2 rounded-circle">
<img alt="avatar" class="img-fluid rounded-circle" src="/img/logo-mini.png">
</div>
<p class="align-self-center mb-0 user-name"> {{ proxy.ProxyIP }} </p>
</div>
</td>
</tr>

VUEJS

data() {
    return {
        BackGroundRed: false
    }
},

However, the issue persists as clicking on a row turns all rows red!

javascript vue.js vuejs3

Answer 1

Answer №1

If you're looking to implement a functionality like the one described below in your project, you can use the code snippet provided (avoid using this in template):

new Vue({
  el: '#demo',
  data() {
    return {
      backgroundRed: null,
      ProxiesList: [{id:1, ProxyIP:1}, {id:2, ProxyIP:2}, {id:3, ProxyIP:3}, {id:4, ProxyIP:4}]
    }
  },
  methods: {
    setBg(id) {
      this.backgroundRed = id
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table>
    <tr role="row" v-for="(proxy, key) in ProxiesList" @click="setBg(key)" :style="backgroundRed === key ? 'background-color:red' : ''">
      <td class="sorting_1"><a href="#"><span class="inv-number">{{ key + 1 }}</span></a></td>
      <td>
        <div class="d-flex">
          <div class="usr-img-frame mr-2 rounded-circle">
            <img alt="avatar" class="img-fluid rounded-circle" src="/img/logo-mini.png">
          </div>
          <p class="align-self-center mb-0 user-name"> {{ proxy.ProxyIP }} </p>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 2

If you're looking to implement a functionality like the one described below in your project, you can use the code snippet provided (avoid using this in template):

new Vue({
  el: '#demo',
  data() {
    return {
      backgroundRed: null,
      ProxiesList: [{id:1, ProxyIP:1}, {id:2, ProxyIP:2}, {id:3, ProxyIP:3}, {id:4, ProxyIP:4}]
    }
  },
  methods: {
    setBg(id) {
      this.backgroundRed = id
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table>
    <tr role="row" v-for="(proxy, key) in ProxiesList" @click="setBg(key)" :style="backgroundRed === key ? 'background-color:red' : ''">
      <td class="sorting_1"><a href="#"><span class="inv-number">{{ key + 1 }}</span></a></td>
      <td>
        <div class="d-flex">
          <div class="usr-img-frame mr-2 rounded-circle">
            <img alt="avatar" class="img-fluid rounded-circle" src="/img/logo-mini.png">
          </div>
          <p class="align-self-center mb-0 user-name"> {{ proxy.ProxyIP }} </p>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 3

Answer №2

If the variable BackGroundRed is set to true, all the <tr> elements in your code will have a red background color.

To address this issue, consider creating an array to store selected rows and add the row identifier to it upon selection. Then, you can easily check if the current row identifier is in the array of selected rows and apply the red background accordingly.

Answer 4

If the variable BackGroundRed is set to true, all the <tr> elements in your code will have a red background color.

To address this issue, consider creating an array to store selected rows and add the row identifier to it upon selection. Then, you can easily check if the current row identifier is in the array of selected rows and apply the red background accordingly.

Change the background color of a particular row in a table using Vue.js to be red

Answer №1

Answer №2

Similar questions

Top Method for Initiating AJAX Request on WebForms Page

What is the best way to include keys in my JSON data, rather than just values?

Combining two objects by id and grouping identical key-value pairs together

Troubleshooting problem in AngularJS: $http request causing DOM to not update when calling jQuery function

Is npm create-react-app giving you trouble?

Formatting dates in a C# MVC application after parsing JSON

Parsley JS - Personalized Validation for Ensuring selected Items meet Minimum Value Requirements

Arranging Material UI tabs on both sides

Is it possible to redirect a URL with a readyState of 4?

Using jQuery to add a class to an input option if its value exists in an array

Integrate JavaScript date into the gulp-rev workflow

Updating the image source URL dynamically inside a division within a script using JavaScript

Looking to eliminate the bullet point next to the labels on a highcharts graph?

The error message "Unexpected token < in JSON at position 0" is indicating a SyntaxError in the

Tips on effectively centering a wide div

Guidelines for sending data to child components using Vue Router

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Exploring Javascript/JQuery parameters based on data types

Retrieve the concealed method's name within the immediately invoked function expression (IIFE

What is the best way to display a list of items in Vue JS while maintaining the