Estoy trabajando con Vue, Vue i18n y Quasar.
Entonces, tengo un archivo js que contiene un objeto con identificación y nombre, que uso en las opciones q-select. Quiero que cuando cambie el idioma (en el menú desplegable de idiomas), el nombre de la etiqueta de los meses también cambie. Pero esto sucede solo si actualizo la página. Uso el mismo archivo js en otros componentes.
Componente 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; },Meses.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") } ];He intentado tantas cosas, pero fue en vano... ¿Alguien tiene sugerencias? Gracias.
Que los months se definan fuera de la propiedad calculada desactiva la reactividad de t . La matriz debe crearse dentro monthOptions . Si se reutiliza entre componentes, Months.js debería exportar una función que devuelva una matriz en lugar de una matriz:
export const getMonths = () => [{...}]así que intenté como dijo Estus, pero no sé por qué no funcionó. Entonces, encuentro otra manera. Dejé que la traducción suceda en el componente. Como esto:
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" } ];Y
computed: monthOptions() { return getMonths().map(months => ({ ...months, name: this.$t(months.name) })) },¡Gracias!