如何基于Ajax请求渲染Vue3组件并处理自动补全动态数据源？

不需要刻意延迟渲染组件，Vue的响应式系统可以自动帮你更新组件的数据源。核心是用响应式变量存储数据源，在Ajax请求完成后更新这个变量即可，具体实现步骤如下：

1. 声明响应式数据源 #

在组件的setup中用ref声明一个空数组，用来存储Ajax返回的选项数据：

import { ref, onMounted } from 'vue'
import Vue3SimpleTypeahead from 'vue3-simple-typeahead'
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css'

// 响应式变量存储选项数据
const options = ref([])
const selectedItem = ref(null)

2. 发起Ajax请求并更新数据源 #

可以根据业务需求选择两种请求时机：

场景一：页面加载时请求全量数据 #

在页面挂载完成后一次性请求所有选项：

onMounted(async () => {
  try {
    // 替换成你的实际接口地址
    const response = await fetch('/api/get-all-options')
    const data = await response.json()
    // 更新响应式变量，组件会自动感知并更新下拉列表
    options.value = data
  } catch (error) {
    console.error('加载数据源失败:', error)
  }
})

场景二：根据输入关键词动态请求 #

如果需要根据用户输入实时过滤后端数据，监听组件的input事件：

const handleInput = async (query) => {
  // 空输入时清空选项
  if (!query.trim()) {
    options.value = []
    return
  }
  try {
    // 携带关键词请求后端接口，注意编码避免参数错误
    const response = await fetch(`/api/search-options?keyword=${encodeURIComponent(query)}`)
    const data = await response.json()
    options.value = data
  } catch (error) {
    console.error('搜索失败:', error)
  }
}

3. 模板中绑定组件 #

把响应式的options绑定到组件的options属性上：

<template>
  <!-- 全量数据场景 -->
  <vue3-simple-typeahead
    v-model="selectedItem"
    :options="options"
    placeholder="输入关键词搜索"
  />

  <!-- 动态搜索场景，加上input事件监听 -->
  <!-- <vue3-simple-typeahead
    v-model="selectedItem"
    :options="options"
    @input="handleInput"
    placeholder="输入关键词搜索"
  /> -->
</template>

常见问题排查 #

• 必须用ref或reactive声明响应式变量存储数据源，普通变量无法触发Vue的响应式更新，组件不会同步数据变化。
• 检查Ajax返回的数据格式：组件要求options是数组，元素可以是字符串，或者包含label（显示文本）和value（实际值）的对象。

内容的提问来源于stack exchange，提问作者John Smith