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

【问题标题】：Vue i18n - object with translation variables in js fileVue i18n - js文件中带有翻译变量的对象
【发布时间】：2022-06-15 05:26:38
【问题描述】：

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

所以，我有一个 js 文件，其中包含一个带有 id 和名称的对象，我在 q-select 选项中使用它。我希望当我更改语言时（在语言下拉菜单中），月份的标签名称也会发生变化。但这只有在我刷新页面时才会发生。

Vue 组件：

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

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

Months.js

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

export const months = 
    [{ 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") }
  ];

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

months 在计算属性之外定义会禁用t 的反应性。该数组需要在monthOptions 中创建。如果在组件之间重用，Months.js 应该导出一个返回数组而不是数组的函数：

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

【讨论】：