Change color of td element when clicked vue js-CodePudding

When this table is populated first, every text is grey and strike through and buttons are disabled. What I want is when I click on any specific line, it changes the color to black and text-decoration:none and enable the button on that line only.

Current code changes the color and text-decoration for every line present when clicked on any line.

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

On click method:

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

data(){
      return {
             line_selected:false
}

}

CodePudding user response：

You should save the index of selected line to highlight only one row instead of all

EnableLine(index)

and

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

For multiple line selection you need to make array for storing all the indexes selected. Take a look at the example!

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 >
   <tbody>
    <tr v-for="(line, index) in summary_lines_list" :key="index">
     <td>
      <p 
        :
        v-on:click="toggle(index)"
        :style="style(index)"
      >{{line}}</p>
     </td>
     <td>
      <button 
        
        :
        :disabled="!isSelected(index)"
      >Use</button>
     </td>
   </tr>
 </tbody>
</table>
</div>