テーブル本体の特定の行にアイコンを表示して、その行を削除したい。解決策を検索して試しましたが、うまくいきませんでした。
すべての行にアイコンを表示するのは簡単ですが、特定の行だけにアイコンを表示するのは困難です。
以下のコードは、私が取り組んでいるものの単純なバージョンです。誰かが解決策を知っていることを願っています。
<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>