click event as props in Vue.js

Question

I created a dynamic overlay component with Vue.js to handle the close event, when we click on the screen away from the intended object the object closes my problem here the click event does not work here's my code

<template>
    <button
        v-if="action"
        @click="clicked"
        tabindex="-1"
        class="fixed z-40 w-full h-full inset-0 bg-black opacity-50 cursor-default"
    ></button>
</template>

<script>
export default {
    name: "Overlay",
    props: {
        action: Boolean,
    },
    methods: {
        clicked() {
            if (this.action === true)  {
                return false
            }
        }
    }
};
</script

Answer 1

Usually you are not allowed to update properties passed to the component. The proper way should be for you to emit the click from where it is used like:

clicked() {
      this.$emit("clicked");
}

Then when you use the overlay component like:

<overlay @clicked="doSomethingHere"></overlay>

You can alter your toggle variable outside of the component, but within the component you should use data() { action: false } instead of attempting to update properties.

Finally you can read more about properties here: https://vuejs.org/v2/guide/components-props.html

Answer 2

i was looking for the same thing but my solution was to use v-if without if true component doesn't fire

      <Toast
        v-if="show"
        type="error"
        description="desc"
      />
        
    <button @click="show = !show">Toast active !</button>