[Vuejs]-Vue and VueRouter creating separate instances of components

by

0👍

✅

The problem I was having was without context, Semantic UI will move the modal outside of the div that was holding the app element Vue was using. So my modal was outside of the DOM and that is why it created a new instance for the component, but the old instance was still present for the modal. The solution was to declare a context for the modal. (https://semantic-ui.com/modules/modal.html#/settings)

Mine looked something like this:

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

So before entering the route I set the context to be the div I am working in. That way my inactive/active modal does not move itself outside the context of the component I am working with. This did cause some issues with the dimmer effect that the modals use.

👤Red

Leave a comment