2017-03-04 6 views
0

未処理のHTMLをvueテンプレートに入力しようとしています。 rawHTMLハンドルバーで無効な式

私はこれらの2つのエラーを取得し

は...

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-7c43939e!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/views/Find.vue 

Vue template syntax error: 

- invalid expression: {{{ github }}} 

@ ./src/components/views/Find.vue 9:2-167 
@ ./src/router/index.js 
@ ./src/main.js 
@ multi ./build/dev-client ./src/main.js 
ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-7c43939e!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/views/Find.vue 

Vue template syntax error: 

- invalid expression: {{{ takeAction }}} 

@ ./src/components/views/Find.vue 9:2-167 
@ ./src/router/index.js 
@ ./src/main.js 
@ multi ./build/dev-client ./src/main.js 

ファイルのコードはここで見ることができます:

<template> 
    <div id="find-help" class="container"> 
    <div> 
     <p>{{{ github }}}</p> 
     <p>{{{ takeAction }}}</p> 
    </div> 
    </div> 
</template> 

<script> 
export default { 
    name: 'find-help', 
    data() { 
    return { 
     github: this.$t('views.find-help.paragraphs')[0], 
     takeAction: this.$t('views.find-help.paragraphs')[1] 
    } 
    } 
} 
</script> 

<style scoped> 
.centered { 
    text-align: center; 
} 

button { 
    border: 1px solid black; 
    padding: 10px; 
    background: none; 
    text-transform: uppercase; 
    min-width: 100px; 
    margin: 5px; 
} 
</style> 

と2本の翻訳は

"find-help": { 
    "paragraphs": [ 
    "We are trying really hard to develop this page into an interactive map and events list. If you have any web development knowledge, we would love your help. Check our open source repository on <a href='http://www.github.com/openrefuge'>http://www.github.com/openrefuge</a>.", 
    "If you cannot help with development, please look at the other areas we need help with on the 'Take Action' page. Thank you!." 
    ] 
} 

アムIですこれを許さない間違ったことをやっている?

私はVUEのドキュメントを以下と

、それが動作するはずトリプルハンドルの構文を以下に発見されていました。

ありがとうございました!

あなたはより完全な実装を見てみたい場合は、https://github.com/openrefuge/openrefuge/pull/11

答えて

1

トリプルハンドルバーをご覧くださいVueの1のためであり、あなたがVue 2を使用しています。 Vue 2 docsを確認してください。

代わりの<p>{{{ github }}}</p>は、あなたが実行する必要があります。<p v-html="github"></p>

+1

私は1つの文書にあったことを認識しませんでした!ありがとうございました。 –

+1

ええ、それも私に起こった。喜んで今働いている。 –