I have a component named "display.vue" which includes a date picker for users to select a date.
//display.vue
<template>
<div class="q-pa-md" style="max-width: 300px">
<q-input filled v-model="date" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date v-model="date">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
return {
date: ref('2019/02/01')
}
}
}
</script>
Additionally, I have a file named "displayData.js" that processes and filters data from the database.
//displayData.js
router.get("/", async function (req, res) {
// Query to retrieve data from the database
const query = 'SELECT * FROM database'
...
// Display the filtered data
}
I am looking to capture the selected date by the user in displayData.js so that each time the user picks a date, the script will automatically query and filter data matching that specific date. What would be an effective way to achieve this? Would updating the selected date in the URL be a suitable approach?