Vue js props not translated after language change

Viewed 126

I have a file with constants like this:

import i18n from '@/i18n';
export const FILTERS = {
BALCONY_TYPE: [
    {
        value: 0,
        name: i18n.t('home.filters.type.balcony_type.0')
    },
    {
        value: 1,
        name: i18n.t('home.filters.type.balcony_type.1')
    }
],
}

In my component I have:

<label class="uk-form-label search-label">Balcon</label>
    <switcher-filter
       :type="apartmentsFilterType.BALCONY_TYPE"
       :options="balconyType"
       @updateFilter="updateFilterValue"
       :selected-option="selectedValue(apartmentsFilterType.BALCONY_TYPE)"
       :key="$store.getters['language/getCurrentLanguage']"
     >
   </switcher-filter>
export default {
name: "Bloc",
components: {
    SliderFilter,
    SelectFilter,
    InputNumberFilter,
    SwitcherFilter,
    Country,
    Region,
    City
},
data() {
    return {
        balconyType: FILTERS.BALCONY_TYPE

SwitcherFilter:

<template>
    <div>
        <ul class="uk-subnav uk-subnav-pill">
            <li
                v-for="item in options"
                :class="item.value === selectedOption ? 'uk-active' : ''"
                >
                    <a
                        href="#"
                        v-on:click="onChange(item.value)"
                    >
                        {{ item.name }}
                    </a>
            </li>
        </ul>
    </div>
</template>
export default {
  name: "SwitcherFilter",
  props: ["options", "type", "selectedOption"],
  methods: {
    onChange(value) {
       this.$emit('updateFilter', this.type, value);
    }
  }
}

When I change language, BALCONY_TYPE values are not translated. Can you help me please?

I save my language in Vuex.

1 Answers

Hello my solution for you is, do not cover value with $t() in the array, but only send value into the place where you will use $t() fn in your case

<a>{{$t(item.name)}}</a>
//or just 
<a>{{$t(BALCONY_TYPE[0].name)}}</a> 
Related