He renderizado un componente Vue en una página HAML en la vista de rieles.

Configurando el componente (Webpacker -> date-picker.js)

 import Vue from 'vue' import DatePicker from '../components/DatePicker.vue' document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById("date-time-picker") if (!el) { return } const app = new Vue({ el, render: h => h(DatePicker) }) })

El selector de fechas.vue

 <template> <div class="input--date-time-picker"> <v-date-picker v-model="date" class="datepicker" > <template v-slot="{ inputValue, inputEvents }"> <input class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300" :value="inputValue" v-on="inputEvents" /> </template> </v-date-picker> </div> </template> <script> import VCalendar from "v-calendar/lib/components/calendar.umd"; import VDatePicker from "v-calendar/lib/components/date-picker.umd"; export default { components: { VCalendar, VDatePicker, }, data() { return { date: new Date(), }; }, watch: { date(newVal, oldVal) { this.$emit("input", newVal); }, }, }; </script>

Y usando el componente en la plantilla HAML

 #date-time-picker %date-picker

Estoy disparando un evento con datos del selector de fechas del componente vue para manejar en la página HAML, pero no puedo tomar el evento de HAML para poder usar esos datos usando el JS.

estoy buscando algo como esto

 #date-time-picker %date-picker @input="handleEvent()"

La sintaxis parece incorrecta y no funciona, ¿hay alguna buena manera de manejar esto?