如何實現 q-input q-date（類星體）的觀察者？

Question

我有一個文件“display.vue”，它實現了一個日期選擇器供用戶選擇日期

//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>

和另一個過濾數據庫中數據的文件“displayData.js”

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

我想在 displayData.js 中獲取用戶選擇的日期，因此每次用戶選擇一個日期時，displayData.js 都會查詢以過濾該日期的數據並自動顯示它們。 這怎么能做得很好？ 我應該將所選日期更新為 URL 嗎？

Answer 1

根據QDate API ，組件在其值更改時發出update:model-value 。 當該發射恰好重新運行您的查詢 function 時，您應該運行 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)
  }
}

其中queryFunctionName是 function 您的router.get("/")代碼所在的任何位置（我還不得不說命名您的 API 獲取 object router非常混亂，因為它通常是為路由保留的名稱 vue-在頁面之間導航），而不是獲取）