router event in PopUp components

[Joost Döbken]

I would like to make a router event with a button in the popup component as described here.

With $router:

<template>
  <button @click="$router.push('home')">Go home!</button>
</template>

<script>
export default {
  name: 'PopupContent'
}
</script>

return:

TypeError: _vm.$router is undefined

[Pete Hegman]

Unfortunately this is a limitation of this approach to popups. The popup component does not have access to the main Vue instance. I would like to explore other popup techniques but haven't had the time yet. I have not tested this so not sure if it will work, but you could try passing the $router instance in as a prop like this:

<template>
  <button @click="router.push('home')">Go home!</button>
</template>

<script>
export default {
  name: 'PopupContent',
  props: ['router']
}
</script>

new popupContent({propsData: {router: this.$router}}).$mount('#vue-popup-content');

[Joost Döbken]

Thanks @phegman ; but I tried this approach before and it also returns a:

[Vue warn]: Error in event handler for "click": "TypeError: _vm.$router is undefined"

[Moritz Schmale]

There is a solution to this!

In the constructor of the component that goes into the popup/marker, add

{
  parent: this
}

i.e:

let component = new Component({ parent: this })
component.$mount(element)

You can also pass props this way with the propsData key.

[Joost Döbken]

Confirmed that this works @narrowtux, thanks. I will close the issue