如何使用 onmouseover 和 Riot.js 在 table 的特定行中显示图标

Question

我想在 table 正文的特定行中显示图标以删除该行。我搜索并尝试了解决方案，但效果不佳。

在所有行显示图标很容易，但只在特定行显示很难。

下面的代码是我正在处理的简单版本。我希望有人知道解决方案。

<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

如何使用 onmouseover 和 Riot.js 在 table 的特定行中显示图标

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

javascript

riot.js

riot