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

Roslan Saidi 0
Viewed 30

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.

flowbite vue.js
1 Answers

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?

vicnoob0
Related