我有一個普通的表格，我面臨的唯一問題是當我點擊特定行時，我只希望該行為紅色。
這是我嘗試過的代碼：
<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
}
},
但是問題是當我點擊一行時，所有的行都變成紅色！
uj5u.com熱心網友回復：
您可以嘗試以下代碼段（不要this在模板中使用）：
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>uj5u.com熱心網友回復：
根據您的代碼，如果BackGroundRed更改為true， ALL of<tr>將具有background-color: red屬性。
這個問題的潛在解決方案是創建一個選定行的陣列，并在單擊時將選定的行識別符號推送給它。然后，您需要做的就是檢查所選行的陣列是否包含當前行識別符號，如果是，則將其背景設定為紅色。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401280.html
上一篇：如何在vuejs中創建輸入事件