Как показать значок в определенной строке в таблице с помощью onmouseover с помощью Riot.js

Question

Я хочу показать значок в конкретной строке в теле таблицы, чтобы удалить эту строку. Я искал решение и пытался, но это не удавалось.

Значок легко отобразить во всех строках, но трудно отобразить только в определенном ряду.

Ниже приведен простой вариант того, над чем я работаю. Я надеюсь, что кто-то знает решение.

<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

Вам нужно будет использовать onmouseenter и onmouseleave, чтобы выполнить скрытие и показ удаления. Вам не нужен родитель show={ parent.showTrash } только статья, и вы пропустили запятую в массиве статей. Вот код

  <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>

Онлайн версия: http://plnkr.co/edit/3lmsWA0RZ0zLERXQDdTr?p=preview