Использование vuetify с i18n и плагином eslint - PullRequest
Новая
       21

Использование vuetify с i18n и плагином eslint

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

Я использую vuetify вместе с vue-i18n, следуя инструкциям здесь .

translations.js: 

const deDict = require('./i18n/vuetify/de.json');
const enDict = require('./i18n/vuetify/en.json');

export default class Translations {
  constructor() {
    this.messages = {
      de: deDict,
      en: enDict,
    };
  }
}

init.js: 

import Translations from './translations';

// Create VueI18n instance with options
const tr = new Translations();
const i18n = new VueI18n({
  locale: 'en', // default locale is English
  messages: tr.messages, // set locale messages
});

Vue.use(Vuetify, {
  lang: {
    /* eslint-disable-next-line vue-i18n/no-dynamic-keys */
    t: (key, ...params) => i18n.t(key, params),
  },
}

const app = new Vue({
  i18n,
  el: '#app',
  data() {
    return {
      i18n,
    };
  },
  render: h => h(Main),
});

Чтобы избежать ошибок в нашей растущей кодовой базе, я хотел бы включить плагин eslint для i18n.

Однако vuetify с помощью vue-i18n ожидает, что ключи будут выглядетьэто внутри кода: 

<a @click="buttonAction">
    {{ $vuetify.t('$vuetify.components.ActionBtn') }}
</a>

И en.json (в отдельном файле) выглядит так: 

{
  "components": {
    "ActionBtn": "Click me!"
  }
}

, но плагин eslint не распознает это как соответствующее.Он хочет, чтобы код выглядел следующим образом: 

<a @click="buttonAction">
    {{ $vuetify.t('components.ActionBtn') }}
</a>

Как я могу реструктурировать способ загрузки json, чтобы обеспечить возможность использования i18n для vutetify с моим линтером?

1 Ответ

1 голос
/ 29 июня 2019 
{{ $vuetify.t('$vuetify.components.ActionBtn') }}

Это если вы используете только встроенную интернационализацию vuetify. В сочетании с vue-i18n вы должны использовать $t('components.ActionBtn') вместе с необходимыми сообщениями vuetify в вашей конфигурации i18n.

...