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

【问题标题】：Realtime i18n Vuejs doesn't refresh text in dropdown实时 i18n Vuejs 不会刷新下拉列表中的文本
【发布时间】：2021-02-25 09:09:51
【问题描述】：

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

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

【问题讨论】：

标签： typescript vue.js vue-i18n

【解决方案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 }
        ];
      },
    },

一旦你将它移动到一个计算出来的道具上，标签的值应该会随着语言而改变

【讨论】：

【解决方案2】：

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

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

【讨论】：