Компонент Vue-i18n с одним файлом не работает - PullRequest
Новая
       30

Компонент Vue-i18n с одним файлом не работает

1 голос
/ 14 мая 2019

Я пытаюсь внедрить v-i18n в свой проект с помощью метода sfc.Я не мог заставить это работать.Я не буду путать вас с моим проектом, поэтому просто изменил, добавив 10-15 строк кода к официальному примеру v-i18n sfc.

Это очень просто показывает мой вопрос.

Для тех, кто предпочитает проверить этот крошечный вопрос по проекту на github

https://github.com/berkansivri/V-i18n-Question

Component1.vue 

<template>
    <p>{{$t('lang')}}</p>
</template>

<i18n>
{
  "en":{
    "lang" : "English"
  },
  "es":{
    "lang": "Espanol"
  }
}
</i18n>

App.vue 

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>es</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
    <Comp1></Comp1>
  </div>
</template>

<i18n>
{
  "en": {
    "hello": "hello"
  },
  "es": {
    "hello": "hola"
  }
}
</i18n>

<script>
import Comp1 from './components/component1'
export default {
  components:{
    Comp1
  },
  name: 'App',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>

Итак, несколько <i18n> тегов в нескольких компонентах.Я только что изменил $ i18n.locale из App.vue, но он не запустил связанную функцию i18n $t('lang') на Component1, просто изменил $t('hello') на себя.Как я могу заставить это работать?

Ответы [ 2 ]

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

Это предполагаемое поведение отдельных файловых компонентов.Если вы хотите изменить все локали всех компонентов, которые вы можете использовать: 

locale (val) {
  // this.$i18n.locale = val
  this.$root.$i18n.locale = val
}

См. Этот выпуск .

0 голосов
/ 31 мая 2019

используя vue devtools вы обнаружите, что сообщения размером $ i18n в одном компоненте файла отличаются друг от друга, поэтому они являются разными объектами.

вам нужно сделать следующее:

i18n.js 

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'cn',
  fallbackLocale: 'en',
  messages
})

export default i18n

App.vue 

import i18n from "./i18n.js"
i18n.locale = "en"
...