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;
},

Months.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)  
}))
},

谢谢!