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

祖先

我刚刚开始使用vue-i18n并尝试在我的语言特定文本中使用v-on-directive(简写:)@

我试图做的是:

// 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也无法对其进行评估。这将导致使用纯HTML,例如:

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

所以我的问题是,是否有一种方法可以使Vue“评估”文本,从而“翻译”文本中的指令。

伯特

如果要包含独立的构建脚本,则可以使用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>

工作示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章