2017-03-04 2 views
0

Ich versuche, etwas Roh-HTML in eine Vue-Vorlage einzugeben.Ungültiger Ausdruck mit rawHTML-Lenkern

<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> 

und die beiden Übersetzungen sind

"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!." 
    ] 
} 

Am I:

ich diese beiden Fehler ...

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 

Der Code für die Datei ist hier zu sehen Etwas falsch machen, was das nicht erlaubt?

ich im Anschluss an die Dokumentation für vue und gefunden worden war

und im Anschluss an den dreifachen Lenkern es funktionieren soll Syntax.

Danke für die Hilfe!

Wenn Sie auf eine vollständigere Umsetzung aussehen möchten, schauen Sie bitte auf https://github.com/openrefuge/openrefuge/pull/11

Antwort

1

Triple-Lenker ist für Vue 1 und Sie verwenden Vue 2. Überprüfen Sie Vue 2 docs.

Statt <p>{{{ github }}}</p>, was Sie tun müssen: <p v-html="github"></p>

+1

ich nicht bewusst war, dass ich auf der 1 Dokumentation war! Vielen Dank. –

+1

Ja, das ist mir auch passiert. Froh arbeitet jetzt. –

Verwandte Themen