I am having a helper function that return a list of options
const getOrderStatuses = () => {
return [
{value: 0, label: 'in_progress'},
{value: 1, label: 'delivered'},
{value: 2, label: 'performed'},
{value: 3, label: 'canceled'}
]
}
the labels are some keys that needs to be translated on rendered (using Vue I18n).
I tried the get-option-label
const orderStatuses = ref(getOrderStatuses())
...
<VueSelect
v-model="status"
:options="orderStatuses"
:isClearable="false"
placeholder=""
:get-option-label="option => $t(option.label)"
/>
but I get warning in the console:
[intlify] Not found 'Canceled' key in 'en' locale messages.
I guess it tries to translate again .... after the keys are found. In the fronted it shows the correct label... but the warnings ....
So, I tried another solution, by removing the get-option-label and translate them before they reach to the vueselect component:
const orderStatuses = computed(() => getOrderStatuses().map(el => ({...el, label: t(el.label)})))
it works this workaround, but I don't like it very much.
How to translate the labels using get-option-label?
I am having a helper function that return a list of options
the labels are some keys that needs to be translated on rendered (using Vue I18n).
I tried the
get-option-labelbut I get warning in the console:
I guess it tries to translate again .... after the keys are found. In the fronted it shows the correct label... but the warnings ....
So, I tried another solution, by removing the
get-option-labeland translate them before they reach to the vueselect component:it works this workaround, but I don't like it very much.
How to translate the labels using get-option-label?