Change props value in vuejs2

Published 7 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

Best Answer (As Selected By afoysal)
Borisu

You don't change props. You can broadcast an event and catch it on the parent component. That's how vanilla Vue handles changes from child to parent. You can also use Vuex, which helps with such cases.

You're the second person using this weird click-outside directive. Where did you copy it from?

Borisu
Borisu
7 months ago (104,110 XP)

You don't change props. You can broadcast an event and catch it on the parent component. That's how vanilla Vue handles changes from child to parent. You can also use Vuex, which helps with such cases.

You're the second person using this weird click-outside directive. Where did you copy it from?

afoysal

Thanks @Borisu. I am developing this directive.

Borisu
Borisu
7 months ago (104,110 XP)

directive: Hehe ok, it's just funny when something like that happens :D

afoysal

Thanks @Borisu . Could you please explain more your answer ? Thanks

Borisu
Borisu
7 months ago (104,110 XP)

I mean I saw someone else using it, then I saw you using it. Just a funny coincidence.

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