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>

使用rawHTML把手的表达式无效

1 个答案: