Vue et VueRouter créant des instances séparées de composants

Question

Je suis novice dans l'utilisation de Vue et Vue Router, mais il a été assez facile à détecter. Voici le problème que j'ai actuellement. J'ai un VueRouter mis en place et un composant pour chaque chemin. Lorsque je charge mon application pour la première fois, j'essaye de faire une action. Dans le composant handView, j'appuie sur un bouton qui affiche un modal, puis sur un bouton du modal. Les deux sont liés aux méthodes en cliquant dans le composant handView. Je console.log les valeurs de certaines données et l'instance "this" quand elles sont pressées. Voici à quoi il ressemble la première fois.

[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 117) 
[Log] 0 2 (self.js, line 118) 
[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 122) 
[Log] 0 2 (self.js, line 123) 

Le premier « 0 2 » est de la méthode du modèle d'ingrédients actifs, le second est de la méthode lié à l'intérieur du bouton clic modal. Les deux lisent 0 et 2 pour les données que je regarde. Ils devraient tous les deux être les mêmes. Alors je navigue vers un autre itinéraire/composant, et je reviens et refais exactement la même chose. Voici le résultat.

[Log] VueComponent {_uid: 9, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 117) 
[Log] 0 3 (self.js, line 118) 
[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 122) 
[Log] 0 1 (self.js, line 123) 

Le premier (_uid: 9), présente les valeurs correctes, mais le bouton modal (second nombres) présente encore les anciennes valeurs. Je pense que cela a quelque chose à voir avec le fait qu'il y a maintenant deux instances séparées du composant, le _uid: 5 du premier journal, et maintenant il y a un _uid: 9.

Pourquoi une nouvelle instance est-elle créée? et il semble avoir les bonnes valeurs, et pourquoi est-ce que le _uid: 5 est accroché après qu'une nouvelle route/composant est navigué et est revenu?

J'utilise Vue 2.3.2, interface sémantique 2.2.10 et 3.2.1 Jquery

Answer 1

Le problème que j'avais été sans contexte, l'interface utilisateur sémantique déplacera le modal en dehors de la div qui tenait la élément de l'application Vue utilisait. Donc mon modal était en dehors du DOM et c'est pourquoi il a créé une nouvelle instance pour le composant, mais l'ancienne instance était toujours présente pour le modal. La solution était de déclarer un contexte pour le modal. (https://semantic-ui.com/modules/modal.html#/settings)

mine avait l'air quelque chose comme ceci:

beforeRouteEnter (to, from, next) { 
    next(function (vm) { 
    $(function() { 
     $("#player-selector").modal({ 
     context: "#router-view" 
     }) 
    }) 
    }); 
} 

Alors avant d'entrer dans la route que je mets le contexte de la div je travaille de cette façon mon modal inactif/actif ne se déplace pas à l'extérieur. le contexte de l'élément avec lequel je travaille. Cela a causé quelques problèmes avec l'effet de gradateur que les modaux utilisent.