how to implement watcher for q-input q-date (quasar)?

Annielaa 0
Viewed 52

I have a file "display.vue" which implements a date picker for user to pick the 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>

and another file "displayData.js" that filters data in the database

//displayData.js
router.get("/", async function (req, res) {
  const query = 'SELECT * FROM database'
  ...
  // display the filtered data
}

I want to get the user selected date within displayData.js so each time the user picks a date, displayData.js will query to filter data of that date and display them automatically. How can this be done nicely? Should I update the selected date to URL?

quasar-framework vue-component vue.js javascript
1 Answers

According to the QDate API the component emits update:model-value whenever it's value is changed. You should run a function when that emit happens to rerun your query function:

<q-date v-model="date" @update:model-value="runQuery">
  <div class="row items-center justify-end">
    <q-btn v-close-popup label="Close" color="primary" flat />
  </div>
</q-date>

methods: {
  runQuery(value) {
    displayData.queryFunctionName(value)
  }
}

where queryFunctionName is whatever function your router.get("/") code lives in (I also just have to say naming your API fetch object router is very confusing because that's usually the reserved name for vue-router, which is for actual routing (navigating between pages), not fetching)

yoduh0
Related