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>

products对象来自Vuex商店

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

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

Answer 1

我怀疑这与Vue如何检测到对象的更改有关，但是我要做的只是对计算方法进行了少量修改，而不是返回values而是返回Map对象并让{{ 1}}致电v-for

values

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

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

1 个答案: