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

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

What is the best way to utilize Link for navigation in React with Material UI?

troubleshooting Axios errors in React applications

Prevent secret select fields from being submitted within a form

What is the best location in Backbone.js to store code unrelated to the view, such as ads and analytics?

Easy methods to navigate between screens without using React Router libraries

Is there a way to automatically refresh a page as soon as it is accessed?

The window resizing function continues on an endless loop

Update individual component based on selected value

The message "Error: Unknown custom element: <router-view> - have you properly registered the component?" is prompting for a solution

efforts to activate a "click" with the enter key are unsuccessful

Using Javascript, access the 'second child' element by referencing the 'first child' element within a shared 'parent element'

Avoid interrupting the code execution until it has finished completely

Prevent CSS3 columns from reverting back to their original state after being rendered

Navigating a Multi-Page Website with Sleek Scrolling

The final output message from the NPM package is displayed right at the conclusion

Interpolating backticks in Javascript allows for constructing a URL containing empty spaces

Moving the legend around in vue-chartJS

Dealing with errors effectively in AngularJS $http requests

What is the best way to trigger a javascript modal to open automatically after a specific duration