Vue에 대한 마운트 해제 또는 새 위치에서 다시 마운트

Question

새로운 기능을 추가 할 프로젝트를 진행 중입니다. 이 기능은 한 페이지에 살기 위해 생성 된 Vue 인스턴스를 사용합니다. 그것은 움켜 잡는다 : window.location.href 그리고 다른 사용자에게 공유 될 수있는 다른 어떤 정보를 가진 메타 데이터를 창조한다.

이제 동적으로 생성 된 페이지에 살려면 동일한 공유 기능이 있어야합니다. 나는 정보의 여러 행을 가지고 각 행 (하나의 행, 100 행 수 있습니다) 클릭 한 상자에서 정보로 채워진 하나의 드롭 다운이 있습니다. 드롭 다운 내에서이 공유 기능이 필요합니다. Vue 인스턴스를 채우는 첫 번째 행을 shareWidget.$mount('some selector[with a data attribute="active"') 함수로 가져올 수 있습니다. 이것은 어떤 행을 먼저 클릭하든 위대한 작품입니다.

다른 행 ($('some selector')을 클릭하자마자 이제는 활성 행의 일부인 드롭 다운 내에 새로운 $('some selector[with a data attribute="active"'))가 추가됩니다.

새 선택기를 sharingWidget이라는 Vue 인스턴스로 채울 수 없습니다. 나는 다시 파괴하고 마운트하려했지만, 나는 예상대로 [Vue warn]: $mount() should be called only once.이된다. Vue 인스턴스를 새 위치로 이동하거나 마운트 해제 한 다음 다시 마운트 할 수있는 방법이 있습니까?

Answer 1

저는 이것이 실제로 수행 될 수 있다고 생각하지 않습니다. Vue 인스턴스가 마운트되면 다시 마운트 할 수 없습니다. 구성 요소와 달리 Vue 인스턴스는 한 곳에서만 살 수 있습니다. 내 해결 방법은 드롭 다운이있는 각 행 대신에 오직 하나만 존재한다는 것입니다. 타일을 클릭하면 활성 행이 만들어지고 그 아래쪽에 드롭 다운이 추가됩니다. 그래서 제가 말했듯이 마운트를 풀고 다시 마운트하는 것은 문제가되지 않습니다.