CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Buildermine
Buildermine

Reputation: 47

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

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!

Upvotes: 1

Views: 970

Answers (2)

benmotyka
benmotyka

Reputation: 179

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.

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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>

Upvotes: 4

Related Questions