Question

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

我试图做的事情：

// 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'评估'文本，从而“翻译”文本中的指令。

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的指令？

1 个答案: