Realtime i18n Vuejs 不刷新下拉列表中的文本

Question

当我在 select

中通过 i18n 更改语言时，我需要立即更新

html

<base-dropdown-item
        v-for="(f, i) in filters"
        :key="`dropdown-${i}`"
        @click="filter = f"
        >{{ f.label }}</base-dropdown-item

打字稿

data() {
return {
  q: '',
  filter: { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
  filters: [
    { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
    { label: this.$t('myTasks.filter.done'), value: 3 },
    { label: this.$t('myTasks.filter.all'), value: 1 }
  ],

  qTasks: []
};
},
watch: {
'filter.value'() {
  this.$emit('filter', this.filter);
},
};

我需要实时更改语言当我需要刷新时

Answer 1

您似乎没有更改示例中的语言环境。

也许 documentation 对您有帮助。我不确定您是否正确设置了语言环境消息。您可以使用 $i18n.locale 在组件内部更改本地语言环境，或使用 $root.$i18n.locale 在您的应用程序中全局更改它。

Answer 2

语言不会改变，因为您是在数据中定义标签。尝试将其移动到计算属性.


    computed: {
      filters() {
        return [
          { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
          { label: this.$t('myTasks.filter.done'), value: 3 },
          { label: this.$t('myTasks.filter.all'), value: 1 }
        ];
      },
    },

将其移至计算道具后，标签的值应相应地更改为语言

Realtime i18n Vuejs 不刷新下拉列表中的文本

Realtime i18n Vuejs doesn't refresh text in dropdown

typescript

vue.js

vue-i18n