Using reusable components in Vue 2 in comination with vue router

Question

I seem to do something wrong when I'm trying to target child components in nested router-views with click events.

Current situation: I have a component one and component two. Both have a child component called dialog.

Component one and two are being loaded through a router-view in parent component dashboard. Each view has a button to show their child component "Modal".

The button seems to work fine on the view that gets loaded on pageload. But as soon as I switch routes the showModal function does not know the dialog element from which view to target.

I thought the components would be destroyed and rebuilt upon switching routes but apparently not.

Here is my code, I hope someone is able to help:

App

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('vuetest', require('./components/vuetest.vue'))

const Dashboard = require('./components/dashboard.vue')
const FirstRoute = require('./components/firstroute.vue')
const Second = require('./components/secondroute.vue')

const routes = [
    {
        path: '/dashboard',
        component: Dashboard,
        children: [
            {
                path: 'firstview',
                name: 'firstview',
                canReuse: false,
                component: FirstRoute
            },
            {
                path: 'secondview',
                name: 'secondview',
                canReuse: false,
                component: Second
            }
        ]
    }
]

const router = new VueRouter({
    routes // short for routes: routes
})

window.EventHub = new Vue()

const app = new Vue({
    el: '#app',
    router
});

Vuetest

<template>
    <div>
        <h1>Vue Test</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        created() {

        },
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

Dashboard Route

<template>
    <div>
        <h1>Dashboard</h1>
        <navigation></navigation>
        <router-view></router-view>
    </div>
</template>
<script>
    Vue.component('navigation', require('./navigation.vue'))
</script>

Navigation

<template>
    <div>
        <router-link :to="{ name: 'firstview' }">first</router-link>
        <router-link :to="{ name: 'secondview' }">second</router-link>
    </div>
</template>

First Route

<template>
    <div class="firstroute">
        <h1>First Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

Second Route

<template>
    <div class="secondroute">
        <h1>Second Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

Modal

<template>
    <div class="dialog hidden">
        Dialog
    </div>
</template>
<style>
    .hidden {
        display: none;
    }
</style>
<script>
    export default{
        created() {
            EventHub.$on('showModal', this.showModal);
        },
        methods: {
            showModal: function() {
                document.querySelector('.dialog').classList.toggle('hidden');
            }
        }
    }
</script>

I really appreciate any help.

Answer 1

tiny recomendations

':class' directive instead of native code:

document.querySelector('.dialog').classList.toggle('hidden');

components:

import Modal from './modal' 

export default {
  ...
  components:
    Modal
  }
  ...
}

instead of

Vue.component('modal', require('./modal.vue'));

.. also Vuex is a good point for this case

additional:

https://github.com/vuejs/vue-devtools

https://jsfiddle.net/uLaj738k/2/

Answer 2

As it turns out the problem was the moment I called the querySelector method.

Assigning the .dialog element to a const in mounted() solved my problem.