是否可以在本地化文本中使用特定于 vue 的指令？

Question

我刚开始使用 vue-i18n 并尝试在我的语言特定文本中使用 v-on 指令（shorthand：@）。

我尝试做的事情：

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

和 vue 模板：

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

这不会引发错误，但不幸的是它也不会被 vue-js 评估。这将导致 Plain-HTML 如：

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

所以我的问题是，是否有办法让 Vue 'evaluate' 成为文本，从而 'translate' 成为文本中的指令。

Answer 1

如果您包含独立构建脚本，则可以使用 Vue.compile 执行类似的操作。我不熟悉 vue-i18n，但这可能会让你走上正确的道路。

请注意，由于模板规则，我不得不 withEventListener 将其包装在 div 中。

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"
})

有了模板

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

Working example.

是否可以在本地化文本中使用特定于 vue 的指令？

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

internationalization

vue.js

vuejs2