afoysal
280
5
Vue

Change props value in vuejs2

Posted 10 months ago by afoysal

I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.

<script>  
import SemanticModal from 'vue-ya-semantic-modal'

export default {        
    components: { SemanticModal: SemanticModal() },
    name: 'ModalBody',
    props: ['active1',],
    data() {
        return  {
            visible: false
        }
    },
    methods: {
        close() {
            this.$emit('sendValue', false);
            this.visible = false
        },
        open () {
            this.visible = true
        },
    },
    watch: {
        active1 () {
            if (this.active1 && !this.visible) this.open()
            else if (!this.active1 && this.visible) this.close()
        },
    },
    directives: {
        'click-outside': {
            bind: function(el, binding, vNode) {
                el.onclick = function(e) {
                    var modal = document.getElementsByClassName("modal");
                    el.addEventListener('click', function (event) {
                        if (!modal[0].contains(event.target)) {                               
                           vNode.context.$emit('sendValue', false);
                           this.visible = false
                        } 
                    })            
               }
            }    
        }
    }
}

I am calling that model (child) component in parent component like below

<modal-body :active1="active1" @sendValue="active1 = $event"></modal-body>

I need to change the below props active1 value to false from child to parent component.

enter image description here

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.