0

I am quite new to VueJs and thanks for advance for the help. I am using.NetCore MVC and Vue together. It is not a single page application...

QUESTION:
In my website, I have got a component displays a confirmation modal, In the modal page there is a cancel button and if the user clicks the cancel button, I would like to set modalBox property false in the Parent class.

What I did: This is my component.

 Vue.component('modalquestion-box', {
  props: ['modalBox', 'message', 'messagedetail'],
data() {
    return {
        isHidden: true
    }
},
watch: {
    modalBox: function () {           
        if (this.modalBox == true)            
            $('#adjConfirmModal').modal('show');
    }
},
methods: {
    "cancelBtnSelected": function () {
        console.log('Cancel Selected');
        this.modalBox = false;         

    }

},
template: `<div class="modal fade" id="adjConfirmModal" tabindex="-1" role="dialog" aria-labelledby="adjConfirmModalTitle" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="adjConfirmModalTitle">Confirm</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                <div class="modal-body">
                    <p>Are you sure ?</p>

                </div>
                <div class="modal-footer">
                    <button type="button" v-on:click="cancelBtnSelected" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" v-on:click="adjConfirmed" class="btn btn-success">Confirm</button>
                    </div>
                </div>
            </div>
         </div>`
 });

My Layout Page

<modalquestion-box v-bind:modal-box.sync="modalBox" v-bind:message="message" v-bind:messagedetail="messageDetail" v-on:closemessage="modalBox = false"></modalquestion-box>

Main Vue Class - Parent

new Vue({
el: '#app',
mounted: function () {
    this.fetchData();
},
data: {
    message: '',
    messageDetail: '',
    messageBox: false,
    modalBox: false

},
methods: {        
    "showConfirmModal": function () {
        this.modalBox = !this.modalBox ;            
    }


}

});

It is working but i need to click confirm button on parent page twice to show the modal message. the first click sets modalBox to true and it shows the modal, then when i click same button it sets false. then i click one more time to show modal again.

Basically i need to change modalBox property to false when user clicks Cancel button.

1 Answer 1

1

in Subcomponents, use this.$emit('closemessage')

<modalquestion-box v-on:closemessage="modalBox = false"></modalquestion-box>

/************** sub *******************/
cancelBtnSelected: function () 
  console.log('Cancel Selected');
  this.modalBox = false;  
  this.$emit('closemessage') // A function that is sent to the parent component binding
}

3
  • Thank you Gao but i am getting the same error..... [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "modalBox"
    – AliAzra
    Feb 12, 2020 at 17:22
  • Ok I fixed it with removing this.modalBox = false; Thanks a lot Gao
    – AliAzra
    Feb 12, 2020 at 17:25
  • [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. you can use of a object, parent :messageVisible:{bol:false}, Feb 12, 2020 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.