vue i18n- js文件中具有翻译变量的对象

Question

我正在与Vue，Vue I18N和Quasar合作。

因此，我有一个JS文件，该文件包含一个带有ID和名称的对象，我在Q-SELECT选项上使用它。我希望当我更改语言时（在语言下拉下）时，几个月的标签名称也会更改。但这只有在我刷新页面时才发生。我在其他组件中使用相同的JS文件

VUE组件：

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

import {getMonths} from "../../components/basic/Months.js";
computed: {
monthOptions() {
      return getMonths;
    },

montrys.js

import { i18n } from "../../boot/i18n.js";

export const getMonths = () => [
  { id: "January", name: i18n.t("MONTHS.JANUARY") },
  { id: "February", name: i18n.t("MONTHS.FEBRUARY") },
  { id: "March", name: i18n.t("MONTHS.MARCH") },
  { id: "April", name: i18n.t("MONTHS.APRIL") },
  { id: "May", name: i18n.t("MONTHS.MAY") },
  { id: "June", name: i18n.t("MONTHS.JUNE") },
  { id: "July", name: i18n.t("MONTHS.JULY") },
  { id: "August", name: i18n.t("MONTHS.AUGUST") },
  { id: "September", name: i18n.t("MONTHS.SEPTEMBER") },
  { id: "October", name: i18n.t("MONTHS.OCTOBER") },
  { id: "November", name: i18n.t("MONTHS.NOVEMBER") },
  { id: "December", name: i18n.t("MONTHS.DECEMBER") }
];

我尝试了很多事情，但是无济于事。有人有建议吗？谢谢。

Answer 1

该月份在计算属性之外定义了t的反应性。数组需要在montroptions中创建。如果在组件之间重复使用，则月份。js应该导出一个返回数组而不是数组的函数：

export const getMonths = () => [{...}]

Answer 2

因此，我像Estus所说的那样尝试过，但是我不知道为什么不起作用。所以，我找到了另一种方法。
我离开了翻译发生在组件中。这样：

const getMonths = () => [
  { id: "January", name: "MONTHS.JANUARY" },
  { id: "February", name: "MONTHS.FEBRUARY" },
  { id: "March", name: "MONTHS.MARCH" },
  { id: "April", name: "MONTHS.APRIL" },
  { id: "May", name: "MONTHS.MAY" },
  { id: "June", name: "MONTHS.JUNE" },
  { id: "July", name: "MONTHS.JULY" },
  { id: "August", name: "MONTHS.AUGUST" },
  { id: "September", name: "MONTHS.SEPTEMBER" },
  { id: "October", name: "MONTHS.OCTOBER" },
  { id: "November", name: "MONTHS.NOVEMBER" },
  { id: "December", name: "MONTHS.DECEMBER" }
];

谢谢

computed:
monthOptions() {
      return getMonths().map(months => ({
      ...months,
      name: this.$t(months.name)  
      }))
    },

！