Ankay
Ankay

Reputation: 3

v-select items are not translated (vue-i18n)

I'm trying to get every text associated with an item in my v-select to update in the language I choose, it doesn't work, but for other elements outside the v-select there's no problem.

Here is my language selector:

<v-select
    class="langue"
    v-model="$i18n.locale"
    :items="languages"
    variant="underlined"
    density="compact"
    hide-details="true"
></v-select>

Here's the v-select in which I'd like the text associated with each item to update visually according to the language selected (only the label is being updated instantly after the language change):

<v-select
    class="infoItemsSelection"
    v-model="infoItems"
    :label="this.$t('indications.infoItemsSelection')"
    :items="infoItems"
    item-title="text"
    item-value="value"
></v-select>

And this is what my data looks like:

infoItems: [{
        text: this.$t('infoNumber1.name') ,
        value: 'Number 1'
      },
      {
        text: this.$t('infoNumber2.name'),
        value: 'Number 2'
      },
      {
        text: this.$t('infoNumber3.name'),
        value: 'Number 3'
      },
      {
        text: this.$t('infoNumber4.name'),
        value: 'Number 4'
      }
      ],

What am I doing wrong here ?

Upvotes: 0

Views: 141

Answers (0)

Related Questions