Vue.js 2+Vuetify中v-autocomplete无法选中指定年份问题求助

1. 正确配置v-autocomplete的核心属性 #

你的年份数组元素是对象结构，必须明确指定item-text和item-value对应字段，让组件能正确识别显示文本和绑定值：

<v-autocomplete
  v-model="selectedYear"
  :items="yearItems"
  item-text="anio"
  item-value="anio"
  label="选择年份"
></v-autocomplete>

这里item-text="anio"指定显示对象里的年份数字，item-value="anio"将绑定值关联到数字类型的anio字段，确保v-model的类型匹配。

2. 正确追加当前年份到数组（避免覆盖原有数据） #

在mounted钩子中，不要直接替换原数组，而是追加当前年份对象，同时保留GraphQL返回的原有数据：

export default {
  data() {
    return {
      selectedYear: new Date().getFullYear(), // 直接绑定数字类型的当前年份
      yearItems: [] // 初始为空，后续填充GraphQL数据
    };
  },
  async mounted() {
    // 执行GraphQL请求获取原年份数组
    const graphQLResult = await this.$apollo.query({ query: YOUR_YEAR_QUERY });
    // 先赋值原有年份数据
    this.yearItems = [...graphQLResult.data.targetField];

    // 追加当前年份，确保结构和原数组元素一致
    const currentYear = new Date().getFullYear();
    // 避免重复添加
    const isYearExists = this.yearItems.some(item => item.anio === currentYear);
    if (!isYearExists) {
      this.yearItems.push({ anio: currentYear, __typename: "Grupo" });
    }

    // 可选：按年份降序排序，让最新年份排在最前
    this.yearItems.sort((a, b) => b.anio - a.anio);
  }
};

⚠️ 错误操作：如果直接用this.yearItems = [{ anio: 2023, ... }]会覆盖原数组，导致原有年份丢失，必须用扩展运算符或push实现追加。

3. 确保v-model绑定值类型匹配 #

selectedYear必须是数字类型的当前年份（比如2023），和item-value对应的anio字段类型完全一致，组件才能正确匹配并选中目标项。

排查要点 #

• 确认GraphQL请求成功返回数据，yearItems已正确接收原有年份数组。
• 检查追加的当前年份对象结构和原数组元素完全一致（必须包含anio和__typename字段）。
• 若仍无法选中，可在数据更新后打印yearItems和selectedYear，确认类型和值是否匹配。

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