CODEWITHSUNDEEP
vue.jsonclick
zakzouk
zakzouk

Reputation: 135

click event as props in Vue.js

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

Upvotes: 4

Views: 12282

Answers (2)

simultsop
simultsop

Reputation: 800

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://v2.vuejs.org/v2/guide/components-props.html

Upvotes: 4

yusuftask08
yusuftask08

Reputation: 11

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>

Upvotes: 0

Related Questions