rawHTML handlebars 的无效表达式

Question

我正在尝试将一些原始 HTML 输入到 vue 模板中。

我得到这两个错误...

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>

两个翻译是

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

我是不是做错了什么不允许这样做的事情？

我一直在关注 vue 的文档并找到了

https://v1.vuejs.org/guide/syntax.html#Raw-HTML

并遵循三把手语法，它应该可以工作。

感谢您的帮助！

如果您想查看更完整的实现，请查看https://github.com/openrefuge/openrefuge/pull/11

Answer 1

三把手适用于 Vue 1，您正在使用 Vue 2. Check Vue 2 docs。

而不是 <p>{{{ github }}}</p>，您需要做：<p v-html="github"></p>

rawHTML handlebars 的无效表达式

Invalid expression with rawHTML handlebars

vue.js

vuejs2