Vue 將內容放置到搜尋參數(QueryString)

在網頁中放置輸入框、下拉式選單、選擇框，如果網頁重新整理資料就會不見，不過有一些常用的選項我們可以將它放到瀏覽器的 QueryString (搜尋參數)中，網頁重新載入時就可以讀取 QueryString ，將內容填入，記憶常用欄位。

下拉式選單

實作起來很簡單，就只是使用 watch 監聽下拉式選單的變化，放入 QueryString ，使用 onMounted 在網頁讀取完畢時將內容填入：

    
<template>

  <label for="selectedOption">下拉式選單：</label>
  <select id="selectedOption" v-model="selectedOption">
    <option value="option1">選項1</option>
    <option value="option2">選項2</option>
    <option value="option3">選項3</option>
  </select>
  
</template>

<script setup>
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'nuxt/app'

const route = useRoute()
const router = useRouter()

const selectedOption = ref('')

watch(selectedOption, (newValue) => {
  router.push({query: {...route.query, option: newValue}})
})

onMounted(() => {
  if (!route.query.option) return;
  if (Array.isArray(route.query.option))  return ;

  selectedOption.value = route.query.option
})

</script>
    

這樣選擇時連結就會變為：

    
http://localhost:3000/?option=option1
    

單選框

    
<input type="radio" id="radio1" name="option" value="radio1" v-model="selectedOption">
<label for="radio1">選項1</label>
<input type="radio" id="radio2" name="option" value="radio2" v-model="selectedOption">
<label for="radio2">選項2</label>
    

文字輸入視窗

    
<input type="text" id="text" name="text" v-model="selectedOption" />