topic Re: Event handler directive not support for components in vue framework? in Calcite Design System Questions

Event handler directive not support for components in vue framework?

baohuachu2 — Wed, 21 Sep 2022 07:50:27 GMT

There is "@esri/calcite-components-react" which support react. The event handler can be written as:

<CalciteButton onClick={(e) => setSliderValue(0)}> Reset </CalciteButton>

While in vue , it not work as this:

<calcite-action @click="count++">Add</calcite-action>

Re: Event handler directive not support for components in vue framework?

KittyHurley — Wed, 21 Sep 2022 16:24:37 GMT

There are a few example applications with Calcite components, including an example for Vue 3, which contains some setup guidance.

Once the project is setup from the accompanying README steps you should be able to use Vue's event handlers.

Was able to successfully run the following code below in the src/components/HelloWorld.vue project file:

<template> <calcite-action @click="count++" text="Add 1" text-enabled></calcite-action> <p>Count is: {{ count }}</p> </template> <script> import '@esri/calcite-components/dist/components/calcite-action'; export default { data() { return { count: 0 } }, }; </script> <style src="@esri/calcite-components/dist/calcite/calcite.css"></style>

To run locally, copy static assets to the public folder manually, and then serve:

npm run copy npm run serve

Re: Event handler directive not support for components in vue framework?

baohuachu2 — Fri, 23 Sep 2022 06:36:41 GMT

Hello @KittyHurley it works, thanks so much. Here I post the example project in stackblitz.

Re: Event handler directive not support for components in vue framework?

baohuachu2 — Tue, 27 Sep 2022 03:34:05 GMT

Hello @KittyHurley These days I tried "calcite-date-picker" component. To bind its "calciteDatePickerChange" event in Vue comonent but there is no any respond in its triggered event handler. The code snippet is as :

<template> <calcite-date-picker range @calciteDatePickerRangeChange="dateChange"></calcite-date-picker> </template> <script setup> import '@esri/calcite-components/dist/components/calcite-date-picker'; const dateChange = ( ) => { console.log("date Changed"); } </script> <style src="@esri/calcite-components/dist/calcite/calcite.css"></style>

Re: Event handler directive not support for components in vue framework?

KittyHurley — Wed, 28 Sep 2022 00:09:40 GMT

Hi @baohuachu2, this appears to be a Vue related issue regarding syntax capitalization, which relates to how Calcite's names events, including "calciteDatePickerChange".

There is a workaround in the meantime (posted below). We've also updated the workaround to the Vue 3 example.