How to manipulate data from child-component

I build a image upload with javascript, vuejs and css. I build a modal window (parent div with position:fixed styles), a box for the content (the upload process)

Template:

 <div class="avatar" @click="showAvatarModal=true">
                               Show Modal
                            </div>

                <avatar-form v-if="showAvatarModal" :user="{{ $user }}"></avatar-form>

With the v-if="showAvatarModal" i'll check if the modal will can be shown. The <avatar-form> are in a single component.

Vue.component('avatar-form', require('./components/files/AvatarForm.vue'));

const app = new Vue({
    el: '#app',
    data() {
        return {
            showAvatarModal: false
        }
    }
});

The Problem: I will add a close-button inside the <avatar-form> component code to close the modal. But the component hasnt access to the "showAvatarModal".

The console throws the following exception:

[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: "showAvatarModal"

How can i fix that?

adamprickett

8 years ago

Level 6

You could use Custom Events - https://vuejs.org/v2/guide/components.html#Custom-Events

Otherwise, why not include the avatar div and the avatar-form in a wrapper component?

<template>
    <div class="avatar-wrapper">
         <div class="avatar" @click="showAvatarModal=true">
            Show Modal
        </div>
        <avatar-form v-if="showAvatarModal" :user="user"></avatar-modal>
    </div>
</template>

<script>
    export default {
        props: [
            'user'
        ],
        data() {
            return {
                showAvatarModal: false
            }
        }
    }
</script>

Please or to participate in this conversation.