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!
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>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.