Level 11
Hey @Craytor I recently did something like this. I would suggest you do something like this (of course using your needed markup, this is just to illustrate the point).
ModalContainer.vue
<template>
<div class="modal" v-if="active" @click.self="close">
<header>
<h2>{{title}}</h2>
</header>
<section>
<component :is="component" :data="data"></component>
</section>
</div>
</template>
<script>
import Hub from '../events/Hub';
import ExampleModalBody from './ExampleModalBody.vue';
export default {
data() {
active: false,
data: {},
title: null,
},
components: {
ExampleModalBody
},
destroyed() {
Hub.$off('set-modal-data', this.set);
Hub.$off('open-modal', this.open);
},
methods: {
close() {
this.active = false;
},
open() {
this.active = true;
},
set(data, title) {
this.data = data;
this.title = title;
this.component = title.split(' ').join('-').toLowerCase(); // of course you could just pass the component through the method too...
}
},
mounted() {
this.$nextTick(function () {
Hub.$on('set-modal-data', this.set);
Hub.$on('open-modal', this.open);
}.bind(this));
}
}
</script>
This would be your base modal. The Hub file is just a Vue instance like the following to use as an event hub.
Hub.js
const Vue = require('vue');
const Hub = new Vue();
export default Hub;
In your blade views (or whatever you're using), you can add a <modal-container></modal-container> tag and then have a method fire off the open-modal and set-modal-data events like shown above.
SomeButtonComponent.vue
<script>
import Hub from '../events/Hub';
export default {
data() {
return {
data: {}
}
},
methods: {
open() {
Hub.$emit('open-modal');
Hub.$emit('set-modal-data', this.data, 'Component Title');
}
}
}
</script>
6 likes
