单击vue js时更改td元素的颜色

Question

首先填充此表时，每个文本都是灰色的并带有删除线，并且按钮被禁用。我想要的是当我单击任何特定行时，它会将颜色更改为黑色和 text-decoration:none 并仅启用该行上的按钮。

当前代码在点击任意一行时会更改每一行的颜色和文本装饰。

<table class="table table-striped">
 <tbody>
  <tr v-for="(line,index) in summary_lines_list" :key="index">
   <td><p :class="'line_'+index" v-on:click="EnableLine($event)" :style='{"text-decoration":(line_selected?"none":"line-through"),"color":(line_selected?"black":"grey")}'>{{line}}</p> </td>
   <td><button :class="'btn btn-sm btn-success line_'+index" :disabled="!line_selected">Use</button></td>
  </tr>
 </tbody>
</table>

点击方式：

methods:{
    EnableLine(event){
      this.line_selected = !this.line_selected;
    },
}

data(){
      return {
             line_selected:false
}

}

Answer 1

您应该保存所选行的索引以仅突出显示一行而不是全部

EnableLine(index)

和

 :style='{"text-decoration":(line_selected === index?"none":"line-through"),"color":(line_selected?"black":"grey")}'

对于多行选择，您需要创建数组来存储所有选择的索引。看看例子！

new Vue({
  el: "#app",
  data: () => ({
    summary_lines_list: [
      'first line', 
      'second line',
      'third line',
      'fourth line'
    ],
    line_selected: []
  }),
  methods: {
    isSelected(index) {
      return this.line_selected.includes(index)
    },
    
    toggle: function(index){
        if(this.isSelected(index)) {
        this.line_selected.splice(this.line_selected.indexOf(index), 1)
      } else {
        this.line_selected.push(index)
      }
    },
    
    style(index) {
      const isSelected = this.isSelected(index)
      return {
        'text-decoration': isSelected ? 'none' : 'line-through',
        'color': isSelected ? 'black' : 'grey'
      }
    }
  }
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table table-striped">
   <tbody>
    <tr v-for="(line, index) in summary_lines_list" :key="index">
     <td>
      <p 
        :class="'line_'+index"
        v-on:click="toggle(index)"
        :style="style(index)"
      >{{line}}</p>
     </td>
     <td>
      <button 
        class="btn btn-sm btn-success"
        :class="'line_'+index"
        :disabled="!isSelected(index)"
      >Use</button>
     </td>
   </tr>
 </tbody>
</table>
</div>