duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
https://www.duetds.com
MIT License
1.73k stars 68 forks source link

dueChange event for duet picker not working with Ionic 5 / Vue 3 #77

Open adityasharma7 opened 3 years ago

adityasharma7 commented 3 years ago

Describe the bug I am using Duet Date Picker in the Ionic 5/ Vue 3 application. The event listener for the duetChange is not working for me.

Here is my code snippet:

<duet-date-picker @duetChange="handleInput($event)"identifier="date" :localization.prop="localisation" direction="left"></duet-date-picker>

handleInput(e: any) {
      console.log("e", e);
      this.$emit("input", this.content);
    }

I have even tried following listeners:

v-on:duetChange="handleInput($event)" 

v-on:change="handleInput($event)" 

@change="handleInput($event)"

Is this the right way to add an event listener or am I missing something?

Here is the code sandbox link: https://codesandbox.io/s/old-silence-1f0nx?file=/src/App.vue

To Reproduce Steps to reproduce the behavior: Add Date Picker to Ionic 5/ Vue 3 application and add an event listener for duetChange event

Expected behavior A clear and concise description of what you expected to happen. Event listener should work

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

WickyNilliams commented 3 years ago

I am seeing the following warnings in the codesandbox console...

[Vue warn]: The `isCustomElement` config option is only respected when using the runtime compiler.
If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` 
in the build setup instead- for example, via the `compilerOptions` option in vue-loader: 
https://vue-loader.vuejs.org/options.html#compileroptions. 

[Vue warn]: Failed to resolve component: duet-date-picker 
  at <App> 

Seems like it might be related to the issue you have? I don't know vue at all, so I am taking a bit of a guess here, but it seems relevant