VueJS Event is not listened

Question

I don't understand why my event is not listened correctly... Here my code, as you can see, i've created a component with an emit event based on the @click button event. Then, i've created my "v-on:my-event" to capture it..I don't understand why i don't see "yolo" in the console.

//Call of the component BaseButton
<base-button variant="projeo-btn-deeppurple" event-type="yololol">
  <span class="mr-2">+</span> Ajouter un client
</base-button>

//Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },
        variant: {
            type: String,
            validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",
                    ].indexOf(value) !== -1
                );
            }
        }
    },
    methods: {
        sendEvent (eventType) {
            this.$emit(eventType)
        }
    }
}
</script>

//Component that listen on the event add-customer
<AddCustomerModal
  v-on:add-customer="addCustomer"
  v-if="addModalIsOpen"
  :isEdition="isEdition"
  :customerId="customer.id"
  :modalTitle="modalTitle"
  @close="addModalIsOpen = false"
  ref="modalCustomer"
/>

//Script portion regarding the method addCustomer
<script>
 methods: {
   addCustomer () {
    console.log("yolo")
   }
}

Thanks for your future answer !

Gerard Szulc · Accepted Answer · 2021-06-25 20:01:58Z

You have 3 layers here. One that emits event is on bottom. You need to listen to event on base-button component to catch that event using @someEvent="someHandler" (in your case here is going to be @yololol because you emit event based on your event type prop) then emit $emit('add-customer') to be possible to listen to this event on AddCustomModal Component

//Call of the component BaseButton
<base-button variant="projeo-btn-deeppurple" event-type="yololol" @yololol="$emit('add-customer')"
// or you can do dynamic listener using variable which contains 'yololol' string
v-on:[yolololVariable]="$emit('add-customer')"
>
  <span class="mr-2">+</span> Ajouter un client
</base-button>

//Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },
        variant: {
            type: String,
            validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",
                    ].indexOf(value) !== -1
                );
            }
        }
    },
    methods: {
        sendEvent (eventType) {
            this.$emit(eventType)
        }
    }
}
</script>

//Component that listen on the event add-customer
<AddCustomerModal
  v-on:add-customer="addCustomer"
  v-if="addModalIsOpen"
  :isEdition="isEdition"
  :customerId="customer.id"
  :modalTitle="modalTitle"
  @close="addModalIsOpen = false"
  ref="modalCustomer"
/>

//Script portion regarding the method addCustomer
<script>
 methods: {
   addCustomer () {
    console.log("yolo")
   }
}

marc_s · Accepted Answer · 2021-07-06 19:46:31Z

Try this. You can listen emitted event only in parent component.

<base-button @emited="$emit($event)" variant="projeo-btn-deeppurple" event-type="yololol">
      <span class="mr-2">+</span> Ajouter un client
</base-button>

    //Component BaseButton
<template>
    <button
        @click="sendEvent(eventType)"
        :class="`${variant} md:text-lg sm:mb-0 mb-3 text-base font-medium pl-5 pr-8 py-2 rounded-xl`"
        type="button"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    props: {
        eventType: {
            type: String
        },
        variant: {
            type: String,
            validator: function (value) {
                return (
                    [
                        "projeo-btn-deeppurple",
                    ].indexOf(value) !== -1
                );
            }
        }
    },
    methods: {
        sendEvent (eventType) {
            this.$emit('emited',eventType)
        }
    }
}
</script>

But i think you could use scoped slots for your task

Collectives™ on Stack Overflow

VueJS Event is not listened

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related