CODEWITHSUNDEEP
internationalizationvue.jsvuejs2
Senči
Senči

Reputation: 941

Is it possible to use vue-specific directives in localized text?

I just started using vue-i18n and tried to use the v-on-directive (shorthand: @) in my language specific text.

What i tried to do:

// locale definition
let locale = {
  en: {
    withEventListener: 'Some HTML with <a @click="onClickHandler">event handling</a>'
  }
}

and the vue template:

<!-- vue template be like -->
<p v-html="$t('withEventListener')" />

This doesn't throw an error but unfortunately it does not get evaluated by vue-js either. This would result to Plain-HTML like:

<p>
    Some HTML with <a @click="onClickHandler">event handling</a>
</p>

So my question is if there is a way to make Vue 'evaluate' the text and thus 'translate' the directives within the text.

Upvotes: 3

Views: 368

Answers (1)

Bert
Bert

Reputation: 82489

You can use Vue.compile to do something like this if you are including the standalone build script. I'm not familiar with vue-i18n, but this might put you on the right path.

Note that I had withEventListener to wrap it in a div because of the rules around templates.

let locale = {
  en: {
    withEventListener: '<div>Some HTML with <a @click="onClickHandler">event handling</a></div>'
  }
}

const res = Vue.compile(Vue.t("withEventListener"));

Vue.component("internationalized", {
  methods:{
    onClickHandler(){
      alert("clicked")
    }
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})


new Vue({
  el:"#app"
})

With the template

<div id="app">
  <internationalized></internationalized>
</div>

Working example.

Upvotes: 1

Related Questions