I am currently developing a feature in my VueJs component that involves opening a modal when a certain condition becomes true, and then retrieving data from a controller to display in the modal.
After searching online, I have not been able to find clear instructions on how to dynamically set content after receiving data through axios.
Below is a snippet of my ModalComponent.vue:
<template>
<div class="modal fade show" id="myModal" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><slot name="modal-header"></slot></h4>
<button type="button" class="close" @click="$emit('close')" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" >×</span>
</button>
</div>
<div class="modal-body">
<slot name="modal-text"></slot>
</div>
<div class="modal-footer">
<slot name="modal-footer"></slot>
<button type="button" class="btn btn-danger" @click="$emit('close')" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ModalComponent"
}
</script>
In another component called ExampleComponent, I demonstrate how to display the modal using a button click event like this:
<button @click="showModal = true">Show Modal</button>
<modal-component v-if="showModal" @close="showModal = false">
<template slot="modal-header"> Testing something </template>
<template slot="modal-text"> Text for the Modal body will go here </template>
<template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal-component>
My goal is to automatically trigger the modal to open if a specific condition is met, retrieve data from the controller, and display it in the modal.
I already have a method in ExampleComponent that fetches data from the controller. However, I am unsure how to insert this data into the modal-text slot and trigger the modal to open.
Any help or guidance would be greatly appreciated. Thank you!