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

Question

我剛開始使用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的「評估」的文字，因此「翻譯」文本中的指令。

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。