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

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 ><a href="#"><span >{{ key   1 }}</span></a></td>
<td>
<div >
<div >
<img alt="avatar"  src="/img/logo-mini.png">
</div>
<p > {{ 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!

CodePudding user response：

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 ><a href="#"><span >{{ key   1 }}</span></a></td>
      <td>
        <div >
          <div >
            <img alt="avatar"  src="/img/logo-mini.png">
          </div>
          <p > {{ proxy.ProxyIP }} </p>
        </div>
      </td>
    </tr>
  </table>
</div>

CodePudding user response：

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.