Vue Nuxt 3 useFetch 輸入查詢參數

本篇介紹Vue Nuxt 3的useFetch呼叫API時帶入搜尋欄的值為查詢參數(Query Parameter)。

把原本寫死在url上的查詢參數，改為從頁面的搜尋欄取得，使用者輸入狀態名稱後，按下查詢按扭去呼叫API查詢資料。

事前要求

參考「Vue Nuxt 3 useFetch 查詢參數」。這篇介紹如何在Nuxt 3中使用useFetch時帶入查詢參數，但參數是直接寫死在url後面。

修改pages/home/export/index.vue

在頁面上新增訂單狀態的[搜尋欄]及[查詢按鈕]。

[搜尋欄]<input v-model="status" .. >綁定ref物件status。

[查詢按紐]點擊時觸發search方法，將[搜尋欄]綁定的ref status的值設定給ref queryStatus的值為查詢參數，並呼叫useFetch的回傳物件中的refresh()函式重新載入資料，因為useFetch不會在ref改變時自動重新送，因此需要手動呼叫refresh()。

查詢參數改用useFetch的query屬性帶入ref物件queryStatus。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>

    <label>
      訂單狀態：
      <input v-model="status" placeholder="pending/done">
    </label>

    <button @click="search">查詢</button>

    <p v-if="pending">資料載入中...</p>
    <p v-else-if="error" class="error">資料載入失敗</p>
    <p v-else-if="orders.length === 0">沒有訂單資料</p>
    <ul v-else>
      <li v-for="order in orders" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }}, 狀態: {{ order.status }}
        </NuxtLink>
      </li>
    </ul>

  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const status = ref('')
const queryStatus = ref('') 

const { data: orders, pending, error, refresh } = useFetch('/api/orders', {
  query: {
    status: queryStatus,
  },
  default: () => [],
})

function search() {
  queryStatus.value = status.value
  refresh()
}

</script>

<!--省略-->

github

在搜尋欄輸入查詢參數的效果如下。

然後可進一步把請求的查詢參數同步到網址列。