[Vuejs]-Show button on one row table

by

4👍

✅

You can do this with css only:

// CSS
tr button {
  display: none;
}

tr:hover button {
  display: inline-block;
}

// HTML
<tr v-for="row in tasks">
  <td span>{{row.id}}</td>
  <td span>{{row.text}}<button>Test</button></td>
  <td span>{{row.date_current}}</td>
  <td span><button>Test</button></td>
</tr>
👤Eugene Tsakh

0👍

You can do it Using VueJS Also Like: 

<div id="app">
     <table class="table table-condensed">
       <thead>
         <tr>
           <th>id</th>
           <th>task</th>
           <th>date</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="row in tasks"  @mouseover="showButtonFunction(row.id)"  @mouseleave="hideButtonFunction" :key="row.id">
           <td>{{row.id}}</td>
           <td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
           <td>{{row.date_current}}</td>
           <td><button v-show="buttonIndex === row.id">Test</button></td>
         </tr>
       </tbody>
  </table>
</div>

JS Code:

var vue = new Vue({
    el: '#app',
    data:{
     buttonIndex: false,
      tasks: [
        {
          id: 1,
          text: "Hello",
          date_current: new Date()
        },
        {
          id: 2,
          text: "Hello2",
          date_current: new Date()
        },
        {
          id: 3,
          text: "Hello3",
          date_current: new Date()
        }
      ]
    },
    methods:{
    showButtonFunction(id){
    // this.title="dsds2"
    this.buttonIndex=id;
  },
  hideButtonFunction(){
    this.buttonIndex=false;
  }
    }
})

Check this Link 🙂

👤shakogele

Leave a comment