Vue i18n - js文件中带有翻译变量的对象

Question

我正在使用 Vue、Vue i18n 和 Quasar。

所以，我有一个 js 文件，其中包含一个带有 id 和 name 的对象，我在 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;
    },

月.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

在计算属性之外定义的months会禁用t的反应性。 该数组需要在monthOptions内创建。 如果在组件之间重用，Months.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)  
      }))
    },

谢谢！