search

panter / vue-i18next

Internationalization for vue using the i18next i18n ecosystem.
https://panter.github.io/vue-i18next/
176 stars 47 forks source link

Component interpolation fails in case of miltiple placeholders #69

Open spotman opened 5 years ago

spotman commented 5 years ago

Hi there!

Thanks for this lib, it helps a lot! Yesterday I discovered the failure in component interpolation. The code below throws an exception

TypeError: Cannot read property 'attrs' of undefined"

in the line

https://github.com/panter/vue-i18next/blob/3ae5a25735fc3d3e57ae6ca2fdfe18501ad71989/src/component.js#L40

<i18next path="frontend.acceptance" tag="span">
  <a :href="tosUrl" target="_blank" place="tos">
    {{ $t("frontend.tos") }}
  </a>

  <a :href="privacyUrl" target="_blank" place="privacy">
    {{ $t("frontend.privacy") }}
  </a>
</i18next>

The frontend.acceptance is: I agree with {{tos}} and {{privacy}}. The single placeholder is processed normally without errors. Using latest versions of vue / i18next / vue-i18next.

Am I doing something wrong or this is an expected behaviour?

spotman commented 5 years ago

The issue was caused by an empty string between a tags, vue parser detects it as a tag but does not populate the data property. Workaround is: remove empty space between interpolation tags. The simple check for non-empty tag/data properties must be added to the library to prevent this issue.

MartinClement commented 4 years ago

Hey there !

Here is a quick fix to keep a "clean" indentation without editing the library. You can use html5 comment tu do a return

    <i18next path="foo" tag="div">
        <span place="place1">place 1</span><!-- fix interpolation
     --><span place="place2">place 2</span>
</i18next>