0

テーブル本体の特定の行にアイコンを表示して、その行を削除したい。解決策を検索して試しましたが、うまくいきませんでした。

すべての行にアイコンを表示するのは簡単ですが、特定の行だけにアイコンを表示するのは困難です。

以下のコードは、私が取り組んでいるものの単純なバージョンです。誰かが解決策を知っていることを願っています。

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

1 に答える 1