rawHTML 车把的无效表达式

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。检查Vue 2 docs。

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