Vue-multiselect: Change Language

[volkanciloglu]

How can I add different language options?

Because the users do not speak english.

[shentao]

I think you can add translations as part of the option slot.
See: https://vue-multiselect.js.org/#sub-custom-option-template

You could do something like:

<template slot="option" slot-scope="props">
      {{ translate(props.option.label) }}
</template>

[khayyak]

anyone wants to change language of some elemnts like placeHolder or empty list message to any language he wants , you can use something like this (I use arabic language) :
<multiselect v-model="value2" :options="modules" :close-on-select="true" :preserve-search="true" placeholder="Module" selectLabel="اضغط لاختيار هذا العنصر" label="intitule" track-by="id" id="example2" @select="onSelect2" > <span slot="noOptions">اللائحة فارغة</span> <span slot="noResult">لا توجد نتيجة</span> </multiselect>
and of course you can use props and slots to change what you want using this link : https://vue-multiselect.js.org/#sub-props

hope this can help someone .

[Fusseldieb]

I think you can add translations as part of the option slot.
See: https://vue-multiselect.js.org/#sub-custom-option-template

You could do something like:

<template slot="option" slot-scope="props">
      {{ translate(props.option.label) }}
</template>

This is actually a really clean solution!
Before I saw this I had a computed() with ids and translated labels and then shove them into :options. Would also work, but in every POST I had to loop over the entire data structure and delete the "label" part and only maintain the "id".
With your current solution I just have a simple value. This simplifies my code by a ton.

With the code mentioned above it still wouldn't translate the currently selected value, this can be done with:

<multiselect 
...
:custom-label="translatedLabel"
...
/>

and in methods() you translate the string (using template literals for example):

translatedLabel (id) {
      return this.$t(`path.to.i18n.field.options.${id}`)
}

EDIT: Or in my case I _directly_ used:

:custom-label="(id)=>$t(`somefile.fields.someinput.options.${id}`)"

to be able to specify own i18n paths for each input. Arrow functions are sweet!

Awesome library! :)