Tengo una tabla normal, el único problema al que me enfrento es que cuando hago clic en una fila específica quiero que solo esa fila sea roja.
Aquí está el código que he probado:
<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 } },Sin embargo, el problema cuando hago clic en una fila, ¡todas las filas se vuelven rojas!
Puede probar algo como el siguiente fragmento (no use this en la plantilla):
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>De acuerdo con su código, si BackGroundRed cambia a true , TODOS los <tr> tendrán la propiedad background-color: red .
La solución potencial para este problema sería crear una matriz de filas seleccionadas y empujar el identificador de fila elegido al hacer clic. Luego, todo lo que necesita hacer es verificar si la matriz de filas seleccionadas contiene el identificador de fila actual y, de ser así, hacer que su fondo sea rojo.