i'm working with Vue, Vue i18n and Quasar.
So, i have an js file that contains an object with id and name, which i use on q-select options. I want that when i change the language (on language drop-down), the label name from months changes too. But this happens only if i refresh the page. I use the same js file in other components
Vue component:
<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") }
];
I've tried so many things, but to no avail.. Does anyone have suggestions? Thanks.
That months is defined outside computed property disables the reactivity of t. The array needs to be created inside monthOptions. If it's reused between components, Months.js should export a function that returns an array instead of an array:
export const getMonths = () => [{...}]
so i tried like Estus said, but i don't know why didn't work. So, i find another way. I left the translation happens in the component. Like this:
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" }
];
And
computed:
monthOptions() {
return getMonths().map(months => ({
...months,
name: this.$t(months.name)
}))
},
Thanks!