typescript - 实时 i18n Vuejs 不会刷新下拉列表中的文本

Question

当我在选择中通过 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

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

    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 }
        ];
      },
    },

将其移动到计算道具后，标签的值应根据语言进行相应更改

Answer 2

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

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