Make background red for a specific row on a table using vue js

Question

I have a normal table, the only problem that I'm facing is I want when I click on a specific row I want only that row to be red.

Here it is the code that I have tried:

<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 problem when I click on a row, all the rows become red!

Nikola Pavicevic · Accepted Answer · 2022-01-02 12:49:57Z

You can try something like following snippet(don't use 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>

benmotyka · Accepted Answer · 2022-01-02 12:50:44Z

0

According to your code, if BackGroundRed changes to true, ALL of <tr> will have background-color: red property.

The potential solution for this problem would be to create an array of selected rows and push choosen row identifier to it upon clicking. Then, all you need to do is to check if array of selected rows contains current row identifier, and if so, make its background red.

answered Jan 2, 2022 at 12:50

benmotyka

1891 silver badge8 bronze badges

Collectives™ on Stack Overflow

Make background red for a specific row on a table using vue js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related