I am trying to implement an eventBus in the App.vue component that allows me to change a modal's CSS based on a payload object. For example, if I pass { type: 'success' }, the border of the modal should turn green, and if I pass { type: 'danger' }, it should turn red. Here is how I'm calling it:
EventBus.$emit('call-modal', { type:'success' });
The challenge I'm facing is figuring out how to dynamically change the CSS of the modal based on the payload received through the eventBus. Can anyone help me achieve this functionality?
Below is a snippet of my sample component:
<template>
<div>
<button class="pleeease-click-me" @click="callModal()">Click me</button>
<div class="modal" v-show="showModal">
<h2>Message</h2>
</div>
</div>
</template>
<script>
import { EventBus } from '../App.vue';
export default {
name: 'bankAccount',
props: ['modalType'],
data() {
return {
showModal: false
}
},
methods: {
callModal() {
this.showModal = !this.showModal
// Emitting an event with a payload when the button is clicked
EventBus.$emit('call-modal', {type:'success'});
}
}
}
</script>
<style scoped>
.modal {
height: 100px;
width: 300px;
border: solid gray 2px;
}
</style>
And here is a snippet of my App.vue component:
<template>
<div id="app">
<bankAccount/>
</div>
</template>
<script>
import bankAccount from './components/bankAccount.vue'
import Vue from 'vue';
export const EventBus = new Vue();
EventBus.$on('call-modal', (type) => {
})
export default {
data() {
modalTypes = [
{ type: 'success' },
{ type: 'danger' },
]
},
name: 'app',
components: {
bankAccount
},
}
</script>
<style>
</style>