我刚刚开始使用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] 删除。
我来说两句