How to use Vue I18n on labels?

[bci24]

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?

[TotomInc]

Hi @bci24,

:get-option-label should not be used for translations purposes.

It's better if you can "setup" your options passed to the VueSelect component. For example, it's better to derivate using a computed() that will use vue-i18n t() to translate the label before they hit VueSelect, like you've done in your previous example.

:get-option-label is similar to :get-option-value in how it should be used, it's when you have to use a key that's different than the default .value to do the mapping between label/value: https://vue3-select-component.vercel.app/props.html#getoptionlabel