Vue搜索输入框无法自动推荐地点问题求助

1. 函数绑定不匹配 #

模板中input的@input绑定的是getSearchResults，但<script setup>里定义的处理函数是getResults，名称不一致导致输入事件无法触发搜索逻辑。
修复：将模板内的@input="getSearchResults"改为@input="getResults"，或者把函数名统一改为getSearchResults。

2. 变量大小写拼写错误 #

定义的响应式变量是mapboxSearchResults（大写S），但在函数内赋值时写成了mapboxSearchresults（小写s），导致请求结果无法同步到模板。
修复：将函数内所有mapboxSearchresults替换为mapboxSearchResults。

3. 初始值类型问题 #

mapboxSearchResults初始值设为null，而v-for无法遍历null，会触发控制台报错。
修复：将初始值改为空数组：const mapboxSearchResults = ref([])。

4. URL参数编码问题 #

直接拼接searchQuery.value到URL中，若输入含空格、中文等特殊字符，会导致API请求失败。
修复：用encodeURIComponent()对搜索关键词编码：

`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchQuery.value)}.json?access_token=${mapboxAPIkey}&types=place`

修复后的完整代码 #

<template>
  <main class="container text-white" >
    <div class="pt-4 mb-8 relative">
      <input type="text" 
      v-model = "searchQuery"
      @input="getResults"
      placeholder="Search for city or state" 
      class="py-2 px-1 w-full bg-transparent border-b
       focus:border-weather-secondary focus:outline-none focus:shadow-[0px_1px_0_0_#004E71]">
       <ul class="absolute bg-weather-secondary text-white w-full shadow-md py-2 px-1 top-[66px]" v-if="mapboxSearchResults.length">
        <li v-for="searchResult in mapboxSearchResults" :key ="searchResult.id" class="py-2 cursor-pointer">
          {{searchResult.place_name}}
        </li>
       </ul>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const mapboxAPIkey ="pk.eyJ1IjoiYWhhbmFhYSIsImEiOiJjbGJqc3d5NG0xNGd5M3BtbWppcmgyNzE4In0.L-HsHWAbshfvVY_xixizNw"

const searchQuery = ref("");
const queryTimeout = ref(null)
const mapboxSearchResults = ref([])

const getResults = () => {
  clearTimeout(queryTimeout.value)
  queryTimeout.value = setTimeout(async() => {
    if(searchQuery.value !== ""){
      const result = await axios.get(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchQuery.value)}.json?access_token=${mapboxAPIkey}&types=place`
      )
      mapboxSearchResults.value = result.data.features
      return;
    }
    mapboxSearchResults.value = []
  }, 300)
}
</script>

额外优化：给列表添加v-if="mapboxSearchResults.length"，避免空数组时显示空白列表。

内容的提问来源于stack exchange，提问作者Ahana's Picks