$te method doesn't find existing key if it contains spaces

Question

I have already made a [issue][1] on the official vue-i18n page, but solving this issue would really help me out thats why I'm asking here too.

I'm using the translation key directly as the english translation so some translation keys look like this 'Next':'Weiter' and others contain spaces or even full sentences: 'This text is translated.':'Dieser Text ist übersetzt.'.

So to prevent a million warnings about the missing english translations I want to check for the key first(this.$te('key')) but this doesn't seem to work when the key contains spaces. It returns false even if the translation key is there and the translation is working.

Does someone know a solution to this or do I have to wait until someone addresses my issue on the github page/fixes it on the package itself?

Edit: The problem is fixed in the latest version of vue-i18n. My other problem still stands though. The missing handler option doesn't prevent the warning being thrown, so this doesn't work either. I solved it by adding my own translation method on the vue instance:

Vue.prototype.$trans = function (key) {
    return i18n.te(key) ? i18n.t(key) : key;
}

This way it only translates the key if it actually exists, but still will get complicated if I want to use pluralization etc. so its not a long term solution. [1]: https://github.com/kazupon/vue-i18n/issues/1309

Answer 1

The problem you are describing indeed exists in a version 7.3.2 but that version is almost 4 years old and current version 8.24.5 works as expected - see example below

Also it seems to me that better way to avoid unneeded error messages would be to supply custom missing handler

var messages = {
  en: {},
  de: {
    'Test translation': 'Test Übersetzung'
  }
}

Vue.use(VueI18n)

var i18n = new VueI18n({
  locale: 'de',
  messages: messages
})
new Vue({
  i18n: i18n
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/vue-i18n@8"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/vue-i18n.js"></script> -->
<div id="app">
  <p>de (implicit): {{ $te("Test translation") }}</p>
  <p>de: {{ $te("Test translation", 'de') }}</p>
  <p>en: {{ $te("Test translation", 'en') }}</p>
</div>