Vue I18n 更改语言环境时删除组件内容

Question

我正在将 Vue I18n 集成到我的应用程序中。我有一个从 Vuex 商店呈现的列表，下面我有一些带有语言环境切换器的可翻译内容（无需重新加载页面）。当我切换语言时，字符串被翻译了，但之前的内容消失了。

我正在使用集成了 Vue-I18n 推荐的单文件组件

Vue.use(VueI18n)
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
const i18n = new VueI18n({
  locale: 'en',
  messages,
})
const app = new Vue({
  router,
  store,
  i18n,
  components: {
     ...
  }
}).$mount('#app')

这是我的模板的一部分

<h3>My products</h3>
  <div class="grid-x grid-x-margin margin-top" v-for="prod in products" :key="prod.id">
    <router-link class="hollow button" to="/search">{{ prod.name }} </router-link>
  </div>
   <p>{{ $t("message.hello") }}</p>
   <select v-model="$i18n.locale">
     <option v-for="(lang, i) in ['ja', 'en']" :key="i" :value="lang">{{ lang }}</option>
   </select>
</div>

产品对象像这样来自 Vuex 商店

computed: {
  products () {
    return this.$store.state.products.values()
  }
}

我希望语言环境切换能够动态更新字符串而不影响上面的列表。毕竟产品名称不需要翻译。产品列表最初呈现正确，当我更改区域设置（没有重新加载页面）时它消失了。我仍然在 Vue 开发人员工具中看到该组件，所以它在那里，但内容不见了。

Answer 1

我怀疑这与 Vue 如何检测对象的变化有关，但我所要做的只是对计算方法进行小的修改，而不是 returning values return Map 对象并让 v-for 调用 values

computed: {
  products () {
    return this.$store.state.products
  }
}

<div v-for="prod in products.values()" :key="prod.id">

Vue I18n 更改语言环境时删除组件内容

Vue I18n deletes component content when changing locale

internationalization

vue.js

vuejs2

vue-i18n