寻求支持对象数组的Vue自动完成组件：显示属性绑定ID值

我帮你梳理了两种靠谱的解决方案，既能满足显示拼接的姓名，又能让v-model绑定对象的id字段：

方案一：使用成熟库 vue-select #

vue-select 是Vue生态里非常受欢迎的选择器组件，天生支持对象数组的处理，完全适配你的需求。

安装 #

npm install vue-select

使用示例 #

<template>
  <v-select
    :options="arrayOfObject"
    v-model="selectedId"
    :get-option-label="option => `${option.firstName} ${option.lastName}`"
    :get-option-value="option => option.id"
    placeholder="选择用户"
  />
</template>

<script>
// 引入组件和样式
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

export default {
  components: { vSelect },
  data() {
    return {
      selectedId: '', // 最终存储选中项的id
      arrayOfObject: [
        { firstName: "example", lastName: "example", id: "10" },
        { firstName: "example2", lastName: "example2", id: "11" }
      ]
    };
  }
};
</script>

关键配置说明 #

• get-option-label：自定义下拉列表中显示的文本，这里直接拼接firstName和lastName
• get-option-value：指定v-model绑定的字段为对象的id，所以selectedId会存储选中项的id值
• 组件自带搜索过滤功能，输入时自动匹配相关选项，完美实现自动完成效果

方案二：手动实现轻量自动完成组件 #

如果不想引入第三方库，你可以自己写一个轻量版的组件，完全可控：

自定义组件代码（CustomAutocomplete.vue） #

<template>
  <div class="autocomplete-container">
    <input
      type="text"
      v-model="searchText"
      @input="filterOptions"
      @blur="closeDropdown"
      @focus="showDropdown = true"
      placeholder="输入姓名搜索"
    />
    <!-- 下拉选项列表 -->
    <ul v-if="showDropdown && filteredOptions.length">
      <li
        v-for="option in filteredOptions"
        :key="option.id"
        @click="selectOption(option)"
        class="autocomplete-option"
      >
        {{ `${option.firstName} ${option.lastName}` }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    // 传入的对象数组
    options: {
      type: Array,
      required: true
    },
    // 绑定的id值（v-model）
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'], // Vue3的v-model事件
  data() {
    return {
      searchText: '', // 输入框显示的文本
      filteredOptions: [], // 过滤后的选项
      showDropdown: false // 是否显示下拉列表
    };
  },
  watch: {
    // 当外部v-model更新时，同步输入框的显示文本
    modelValue(newId) {
      const matchedOption = this.options.find(opt => opt.id === newId);
      this.searchText = matchedOption ? `${matchedOption.firstName} ${matchedOption.lastName}` : '';
    }
  },
  methods: {
    // 根据输入过滤选项
    filterOptions() {
      if (!this.searchText) {
        this.filteredOptions = [...this.options];
        return;
      }
      const keyword = this.searchText.toLowerCase();
      this.filteredOptions = this.options.filter(option => {
        const fullName = `${option.firstName} ${option.lastName}`.toLowerCase();
        return fullName.includes(keyword);
      });
      this.showDropdown = true;
    },
    // 选中选项时更新绑定的id
    selectOption(option) {
      this.searchText = `${option.firstName} ${option.lastName}`;
      this.$emit('update:modelValue', option.id); // 把id传给父组件的v-model
      this.showDropdown = false;
    },
    // 失去焦点时关闭下拉列表（延迟避免点击选项时立即隐藏）
    closeDropdown() {
      setTimeout(() => {
        this.showDropdown = false;
      }, 200);
    }
  },
  mounted() {
    this.filteredOptions = [...this.options];
  }
};
</script>

<style scoped>
.autocomplete-container {
  position: relative;
  width: 300px;
}
.autocomplete-container input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.autocomplete-option {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.autocomplete-option:hover {
  background-color: #f5f5f5;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  position: absolute;
  width: 100%;
  background: white;
  z-index: 100;
  box-sizing: border-box;
}
</style>

使用自定义组件 #

<template>
  <custom-autocomplete
    :options="arrayOfObject"
    v-model="selectedId"
  />
</template>

<script>
import CustomAutocomplete from './CustomAutocomplete.vue';

export default {
  components: { CustomAutocomplete },
  data() {
    return {
      selectedId: '',
      arrayOfObject: [
        { firstName: "example", lastName: "example", id: "10" },
        { firstName: "example2", lastName: "example2", id: "11" }
      ]
    };
  }
};
</script>

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