I am building a ponent in VueJs where need to open modal if condition gets true and get the data from controller and display in the modal.
I have looked online but could not find how to set up the dynamic content after receiving data using axios
.
Here is 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 other ponent ExampleComponent I can display modal using a button like this
<button @click="showModal = true">Show Modal</button>
<modal-ponent v-if="showModal" @close="showModal = false">
<template slot="modal-header"> Testing something </template>
<template slot="modal-text"> Modal Body will go here </template>
<template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal-ponent>
But I want to open this modal automatically if some condition is true, get the data from controller and display.
I have a method in ExampleComponent where I receive the data from controller but how do I set that data into modal-text
slot and open the modal.
Thank you
I am building a ponent in VueJs where need to open modal if condition gets true and get the data from controller and display in the modal.
I have looked online but could not find how to set up the dynamic content after receiving data using axios
.
Here is 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 other ponent ExampleComponent I can display modal using a button like this
<button @click="showModal = true">Show Modal</button>
<modal-ponent v-if="showModal" @close="showModal = false">
<template slot="modal-header"> Testing something </template>
<template slot="modal-text"> Modal Body will go here </template>
<template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal-ponent>
But I want to open this modal automatically if some condition is true, get the data from controller and display.
I have a method in ExampleComponent where I receive the data from controller but how do I set that data into modal-text
slot and open the modal.
Thank you
Share Improve this question asked Oct 10, 2018 at 4:48 Mike RossMike Ross 2,9725 gold badges52 silver badges107 bronze badges2 Answers
Reset to default 5Add
<template slot="modal-text"> {{ modalText }} </template>
instead
<template slot="modal-header"> Testing something </template>
Then add
data () {
return {
showModal: false,
modalText: ''
}
},
methods: {
showModalFn: function (showModalData) {
// your code
// ...
this.showModal = true
this.modalText = 'Whatever you want to show'
}
}
Write the data fetching code ( example bellow ) in the created method demonstrated in the following codepen:
function getServerData (url, urlParams ){
if ( typeof url_params == "undefined" ) { urlParams = getUrlParams() }
return axios.get(url , { params: urlParams } )
.then(response => {
return response ;
})
.catch(function(error) {
console.error ( error )
return error.response;
})
}