Vue I18n удаляет содержимое компонента при изменении локали - PullRequest
Новая
       29

Vue I18n удаляет содержимое компонента при изменении локали

1 голос
/ 21 июня 2019

Я интегрирую 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, поэтому он есть, но его содержимое исчезло.

1 Ответ

0 голосов
/ 27 июня 2019

Я подозреваю, что это связано с тем, как Vue обнаруживает изменения в объектах, но все, что мне нужно было сделать, это небольшая модификация в вычисляемом методе, вместо того, чтобы возвращать values, просто вернуть объект Map и позволить вызову v-forvalues 

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

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