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

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>