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>
Solved! Go to 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
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>
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
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>
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>
Hello @KittyHurley it works, thanks so much. Here I post the example project in stackblitz.