Riot.js를 사용하여 onmouseover가있는 테이블의 특정 행에 아이콘을 표시하는 방법

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