How to show icon in specific row in table with onmouseover with Riot.js

Question

I want to show icon in specific row in table body to delete that row. I searched solution and tried but that didn't go well.

It is easy to show icon in all rows but difficult to show in specific row only.

Below code is simple version of what I'm working on. I hope someone know the solution.

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr each={ article in articles } onmouseover={ onMouseOver }>
            <td>{ article.title }<i class='fa fa-trash-o' aria-hidden='true' show={ parent.showTrash }></i></td>
            <td>{ article.category }</td>
            <td>{ article.date }</td>
        </tr>
    </tbody>
</table>

<script>
this.articles = [
    {title: 'This is How Japanese Makeup' date: 'Oct 7 2016',  category:'Makeup'},
    {title: 'This is Japanese Fashion' date: 'Oct 8 2016',  category:'Fashion'},
    {title: 'This is Japanese Food' date: 'Oct 9 2016',  category:'Food'}
]

onMouseOver(e) {
    e.item.article.showTrash = true
}
</script>

Answer 1

You will need to use onmouseenter and onmouseleave to execute the hide and show of the Delete. You don´t need the parent show={ parent.showTrash } just the article and you missed a comma in the articles array. Here is the code

  <table>
      <thead>
          <tr>
              <th>Title</th>
              <th>Category</th>
              <th>Date</th>
          </tr>
      </thead>
      <tbody>
          <tr each={ article in articles } onmouseleave={offTrash} onmouseenter={ onTrash }>
              <td>{ article.title }<i class='fa fa-trash-o' aria-hidden='true' show={article.showTrash}> X </i></td>
              <td>{ article.category }</td>
              <td>{ article.date }</td>
          </tr>
      </tbody>
  </table>

  <script>
  this.articles = [
      {title: 'This is How Japanese Makeup', date: 'Oct 7 2016',  category:'Makeup'},
      {title: 'This is Japanese Fashion', date: 'Oct 8 2016',  category:'Fashion'},
      {title: 'This is Japanese Food', date: 'Oct 9 2016',  category:'Food'}
  ]

  onTrash(e) {
      e.item.article.showTrash = true
  }
  offTrash(e) {
      e.item.article.showTrash = false
  }  
  </script>

Online version: http://plnkr.co/edit/3lmsWA0RZ0zLERXQDdTr?p=preview