Vue.js Pass Component Data Value to Child Component

Question

I have a component TopBar.vue and I'm trying to open a modal (a child component Feedback.vue).

How do I bind the showFeedbackModal property between both components?

I want to make it so that when you click the <a> tag with @click="showFeedbackModal = true the value true gets passed to the <feedback> component and the modal is shown.

TopBar.vue (Main)

<template>
    <div>
        <section class="top-bar level">
            <div class="level-left">
                ...

                <ul class="level-item">
                    <li><a @click="showFeedbackModal = true"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> Beta Feedback</a></li>
                </ul>
            </div>
            ...           
        </section> 

        <feedback :showFeedbackModal="showFeedbackModal"></feedback>            
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showFeedbackModal: false
            }
        }
    }
</script>

Feedback.vue (modal)

<template>
    <div>
        <div v-if="showModal" class="modal is-active">
            <div class="modal-background" @click="showModal = false"></div>
            <div class="modal-content">
                <div class="box">
                    This is the feedback content
                </div>
            </div>
            <button class="modal-close" @click="showModal = false"></button>
        </div>
    </div>
</template>

<script>
    export default {        
        props: ['showFeedbackModal'],

        data() {
            return {
                showModal: false
            }
        },

        beforeMount() {
            this.showModal = this.showFeedbackModal;
        }
    }
</script>

thanksd thanksd · Accepted Answer · 2017-06-12T16:46:09

You are setting your showModal property in the Feedback component's mounted hook. This means that when the component is mounted to the DOM, the value of showModal will be set to whatever showFeedbackModal is initially but then won't change if the value of showFeedbackModal ever changes.

You should just make showModal a prop in your Feedback component:

export default {        
    props: ['showModal'],
}

And then, in your TopBar component, you just need to pass the showFeedbackModal variable as the value for the showModal property:

<feedback :showModal="showFeedbackModal"></feedback>

If you want the Feedback modal component to be able to affect its parent component's showFeedbackModal variable, you can emit a custom event in the Feedback component:

<button class="modal-close" @click="$emit('close')"></button>

And then update the value of showFeedbackModal in the handler for that event:

<feedback 
  :showModal="showFeedbackModal" 
  @close="showFeedbackModal = false"
></feedback>

Vue.js Pass Component Data Value to Child Component

1 Answers