Subscribe on changes!

Emitting event with cabeb-case name format doesn't work

avatar
Oct 30th 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/emit-with-camel-case-issue-tsqn0?file=/src/components/Child.vue

Steps to reproduce

I have a Child component in which I emit an event to the parent component Container with cabeb-case name format:

export default defineComponent({
  name: "Child",
  emits: ["enlarge-text"],
  methods: {
    tryThis() {
      console.log("trying");
      this.$emit("enlarge-text", "someValue");
    },
  },
});

in parent :

    <Child @enlarge-text="onEnlargeText" />
  ....
  methods: {
    onEnlargeText() {
      console.log("enlarging text");
    },
  },

What is expected?

i expect that the emitted event should be fired in parent component

What is actually happening?

this doesn't fire the event, but if I change the name to camelCase format it works fine


The linter doesn't accept the camelCase named event

I remarked this after trying to answer this question on Stackoverflow

avatar
Oct 30th 2020

see #2429

avatar
Oct 30th 2020
<Child @EnlargeText="onEnlargeText" />

works

avatar
Oct 30th 2020
<Child @EnlargeText="onEnlargeText" />

works

Yes it works but the linter raises a warning

avatar
Oct 30th 2020

image it doesn't raise a warning for me :thinking:

avatar
Oct 30th 2020

image it doesn't raise a warning for me 🤔

@vhoyer i'm talking about the camelCase format which works but the linter raises a warning

avatar
Oct 30th 2020

@edison1105 i updated that module to the version 3.0.2 but it's still not working

avatar
Oct 30th 2020

Hi @boussadjra I just peeked into the package-lock.json in your reproduction link. It seems that the @vue/compiler-sfc is at version 3.0.0. If you can try to upgrade the module to 3.0.2, it should work.

Screenshot 2020-10-30 at 11 26 35 PM