Component interpolation fails in case of miltiple placeholders

[spotman]

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

vue-i18next/src/component.js

Line 40 in 3ae5a25

if (!child && e.data.attrs && e.data.attrs.place && e.data.attrs.place === place) {

<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]

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]

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>