Flowbite Datepicker Vue 2: How to make $refs as reactive?

Question

this is following question for Vue 3 getting selected date from datepicker

I tried to make $refs as reactive data.

For instance,

<template>
<div>
   <input id="datepicker" ref="startDate" type="text" @change="startTrigger>
</div>
</template>

<script>
import DateRangePicker from 'flowbite-datepicker/DatePicker'

export default {
    methods: {
       startTrigger(event) {
          console.log(event.target.value)
       }
    }
}
</script>

But it didn't trigger any function. There's no log in console.

You ask how to make `$refs` reactive, but that has nothing to do with your actual problem, which is that `startTrigger` is not getting called in your case. In any case, I cannot reproduce the problem in this [demo](https://sfc.vuejs.org/#eNpNUNtqwzAM/ZWgpxVW+z14Y4N9wh794iWK4y6+YCtZR+m/T667EmGwdCSdc9AF3lMS24rQgyL0aTGErzpoUqPbOOk4lAtppc6NLxpG7ic3fGPW0GWcGCpkMn0wzgj9JmSI8ExcvQ2zCbYCt5nP7Kyti01ANgUl97pBlSG7RJzjOcVM3YiTWRfqLs2MR5rjWPr/mmNP/oQbBjrsuhxDDCUuKJZoW1/whkUSm1lWPDxGry3jj5+SdyfwDM5XK0dvkjiVGPhYN359bxQNDz8a+Jq11jATpdJLWaahnvhURMxWcibyGsh5FFj88SvHn4KZiTVUiqoO1z/7iosA). — tony19, Sep 15 '22 at 04:02
Perhaps you're incorrectly expecting `startTrigger` to be called with every keypress. The `change` event is only fired when the input has a different value upon losing focus. — tony19, Sep 15 '22 at 04:04

score 0 · Accepted Answer · answered Sep 15 '22 at 05:17

Not sure this will answer your question because the $refs is not relavent to the reactive. Ref is just the way to obtain the DOM reference.

With your code, you are using @change, which call only after the input is blur for the input [type="text"], that's why your console has no log (And you can remove your ref if you are using event). Can read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

If you want the startTrigger called everytime you type, you can use event as @input, @keypress (usually along with the debounce function). Here is the example for you: Are Vue.js and debounce (lodash/underscore) compatible?

Flowbite Datepicker Vue 2: How to make $refs as reactive?

1 Answers1