Avoid mutating a prop directly - dismissing modal

I have a question similar to what @iraklisg asked here, but I’m still confused. I have an UpdateModal component which I use to update a note on click. I get the “Avoid mutating a prop directly” when I set this.note = null but I don’t see any other way to deal with this. If I create a computed property or a data element in the component, the modal never goes away because the v-if="note" is never again false.

// App.vue
<update-modal :note="selectedNote"></update-modal>

// UpdateModal.vue
<template>
  <div v-if="note" @click="dismissModal">
  ...
  </div>
</template>

<script>
    export default {
        props: ['note'],
        methods: {
            ...
            dismissModal () {
              this.note = null;
            }
        }
    }
</script>

Use $emit() to emit an event to the parent indicating the dismissal. The parent has to listen for this event, and should set the selectedNote to null.

<update-modal :note="selectedNote" @dismiss="selectedNote= null"></update-modal>
dismissModal () {
              this.$emit('dismiss')
            }

Thanks, Linus. That did it, now I just have to figure out the next problem :slight_smile: