Event handler directive not support for components in vue framework?

[baohuachu2]

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>

[KittyHurley · Accepted solution]

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

[baohuachu2]

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>
​

[KittyHurley · Accepted solution]

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.

<script>
import '@esri/calcite-components/dist/components/calcite-date-picker';
/**
 * This is a workaround for listening to custom events
 * that contain capital letters.  Adapted from:
 * https://github.com/vuejs/core/issues/5401#issuecomment-1041214293
 */
const eventDirective = {
  beforeMount(el, { arg, value }) {
    console.log(arg); // casing is preserved, check console
    el.addEventListener(arg, value);
  },
  beforeUnmount(el, { arg, value }) {
    el.removeEventListener(arg, value);
  },
};
export default {
  methods: {
    datePickerRangeChangeHandler(event) {
      console.log(
        'datePickerRangeChangeHandler',
        event.detail,
      );
    },
  },
  directives: {
    event: eventDirective,
  },
};
</script>

<style src="@esri/calcite-components/dist/calcite/calcite.css"></style>

<template>
    <calcite-date-picker
      range
      v-event:calciteDatePickerRangeChange="datePickerRangeChangeHandler"
    ></calcite-date-picker>
</template>

[baohuachu2]

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