Problem with CLI 3 configuration and html tags

[kevingobert]

Translations don't match because VueJS adds the data-v attribute.

Config

<template>
  <div class="home">
    <p v-translate>Hello!</p>
    <translate :translate-n="count" translate-plural="%{ count } cars">%{ count } car</translate>
    <p v-translate='{count: carNumbers}' :translate-n="carNumbers" translate-plural="<strong>%{ count }</strong> cars" translate-comment="My comment for translators">
      <strong>%{ count }</strong> car
    </p>
  </div>
</template>

Edit 28/09
I only have this problem when using it in a component with html tags in string

Thanks

[kevingobert]

I have the problem when the style is "scoped". Do you have a solution for this?

[mantasdaraciunas]

@kevingobert Have you solved this issue?

[kevingobert]

@mantasdaraciunas No, I have not found a solution.

[wjdp]

Just come across this.

Seems if you have <style scoped> in your Vue SFC Vue will inject these data attributes on every HTML element.

e.g.

<p v-translate>Hello <strong>World</strong></p>

becomes

<p v-translate data-v-abc123>Hello <strong data-v-abc123>World</strong></p>

and translations no longer match.

@kevingobert Did you find a solution?

[idekov-hf]

I'm experiencing the same issue and wanted to check if there are any updates on this.

[codebykenny]

We are experiencing the same exact issue, the data-v variable with scoped styles changes the msgid and therefore the translation is not found.

A solution to this problem might be using regex, remove the randomly generated data-v-* variables

For example msgid = msgid.replace(/(data-v-([0-9a-z]*)="" )/gm, '');

[Getz85]

Same issue here, any news on this ?
Or a workaround ?