Vue i18n切换语言q-select月份选项不更新需刷新才生效

• 计算属性逻辑错误：monthOptions 直接返回 getMonths 函数本身，没有执行函数生成实际选项数组
• 缺失响应式依赖收集：就算执行getMonths，计算属性没有读取i18n的响应式语言状态，切换语言时不会触发重新计算，翻译值停留在初始化时的结果
• 模板绑定写法错误：计算属性本身已经是最终值，模板里加()调用属于多余写法，会丢失计算属性缓存能力，也无法触发响应式更新

方案1：修正响应式依赖收集（改动最小） #

1. 修正组件内计算属性写法，主动引入i18n实例，读取当前语言状态收集依赖，切语言时自动重新生成选项：

// 组件script部分
import {getMonths} from "../../components/basic/Months.js";
import { i18n } from "../../boot/i18n.js";

export default {
  computed: {
    monthOptions() {
      // 主动读取当前语言，触发响应式依赖收集
      // Vue3 + vue-i18n@9 用下一行
      i18n.global.locale.value;
      // Vue2 + vue-i18n@8 就替换为 i18n.locale
      return getMonths(); // 执行函数拿到最新翻译的选项数组
    }
  }
}

2. 修正模板里的q-select绑定，去掉monthOptions后面的括号：

<q-select
  v-model="monthValue"
  :options="monthOptions"
  map-options
  emit-value
  option-value="id"
  option-label="name"
  outlined
  dense
/>

Months.js 原有代码不需要改动，每次计算属性重新执行时都会调用i18n.t生成对应语言的选项。

方案2：静态存翻译key，渲染时实时翻译（更易维护，推荐） #

不用提前在JS文件里生成翻译后的选项，直接存静态配置和翻译key，渲染时调用组件的响应式$t方法翻译，完全不需要手动处理依赖收集：

1. 修改Months.js，导出纯静态配置：

// Months.js
export const MONTH_OPTIONS = [
  { id: "January", labelKey: "MONTHS.JANUARY" },
  { id: "February", labelKey: "MONTHS.FEBRUARY" },
  { id: "March", labelKey: "MONTHS.MARCH" },
  { id: "April", labelKey: "MONTHS.APRIL" },
  { id: "May", labelKey: "MONTHS.MAY" },
  { id: "June", labelKey: "MONTHS.JUNE" },
  { id: "July", labelKey: "MONTHS.JULY" },
  { id: "August", labelKey: "MONTHS.AUGUST" },
  { id: "September", labelKey: "MONTHS.SEPTEMBER" },
  { id: "October", labelKey: "MONTHS.OCTOBER" },
  { id: "November", labelKey: "MONTHS.NOVEMBER" },
  { id: "December", labelKey: "MONTHS.DECEMBER" }
];

2. 组件内直接引入静态数组，通过option-label配置实时翻译：

<q-select
  v-model="monthValue"
  :options="MONTH_OPTIONS"
  map-options
  emit-value
  option-value="id"
  :option-label="opt => $t(opt.labelKey)"
  outlined
  dense
/>

// 组件script部分
import { MONTH_OPTIONS } from "../../components/basic/Months.js";
export default {
  data() {
    return {
      monthValue: null,
      MONTH_OPTIONS
    }
  }
}

这个方案下静态数组只会初始化一次，多组件复用没有额外开销，组件自带的$t是响应式的，切换语言会自动更新标签，不需要额外写依赖收集逻辑。

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