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

• javascript
• vue.js

2 Answers 2

Add

<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;
  })
}