Vueのアンマウントまたは新しい場所での再マウント

Question

私は、新しい機能が追加されるプロジェクトに取り組んでいます。この機能では、1ページに作成されたVueインスタンスが使用されます。それはグラブ：window.location.hrefと他のユーザーに共有できるいくつかの他の情報でメタデータを作成します。

これで、動的に作成されたページで同じ共有機能を使用する必要があります。私は情報のいくつかの行を持って、各行（1行にすることができます100行にすることができます）クリックされているボックスからの情報で設定されている1つのドロップダウンがあります。ドロップダウン内で、私はこの共有機能を持つ必要があります。私は最初の行にshareWidget.$mount('some selector[with a data attribute="active"') 関数を持つVueインスタンスを設定することができます。これは、どの行を最初にクリックしてもうまく動作します。

問題は、別の行（$('some selector'）が削除され、新しい$('some selector[with a data attribute="active"')）がアクティブな行の一部になっているドロップダウン内に追加されることです。

新しいセレクターにsharingWidgetという名前のVueインスタンスを取り込むことができません。私は破壊して再びマウントしようとしましたが、私は[Vue warn]: $mount() should be called only once.が期待されています。 Vueインスタンスを新しい場所に移動させるか、アンマウントして再度マウントする方法はありますか？

Answer 1

私はこれが実際にできるとは思わない。 Vueインスタンスがマウントされると、再度マウントすることはできません。コンポーネントではなくVueインスタンスは、1つの場所にしか存在できません。私の回避策は、各行にドロップダウンがなく、1つだけが存在することでした。タイルをクリックすると、アクティブな行が取得され、その下にドロップダウンが追加されます。だから、私が言ったように、アンマウントと再取り付けは問題ではないようです。