1

我的 Vue 项目中有以下内容：

:customHighlight = `(props) => ({
          highlight: {
              pre_tags: ['<mark>'],
              post_tags: ['</mark>'],
              fields: {
                  text: {},
                  title: {},
              },
              number_of_fragments: 0,
          },
      })`

我收到以下错误：

Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'v-bind' directives require an attribute value (vue/valid-v-bind) at src\views\Home.vue:24:7:
  22 |         ]"
  23 |
> 24 |       :customHighlight = `(props) => ({
     |       ^
  25 |           highlight: {
  26 |               pre_tags: ['<mark>'],
  27 |               post_tags: ['</mark>'],


error: Parsing error: unexpected-character-in-unquoted-attribute-value (vue/no-parsing-error) at src\views\Home.vue:24:26:
  22 |         ]"
  23 |
> 24 |       :customHighlight = `(props) => ({
     |                          ^
  25 |           highlight: {
  26 |               pre_tags: ['<mark>'],
  27 |               post_tags: ['</mark>'],


error: Parsing error: Line 1: Unterminated template

> 1 | 0(`(props))
    |    ^ (vue/no-parsing-error) at src\views\Home.vue:24:27:
  22 |         ]"
  23 |
> 24 |       :customHighlight = `(props) => ({
     |                           ^
  25 |           highlight: {
  26 |               pre_tags: ['<mark>'],
  27 |               post_tags: ['</mark>'],


error: Parsing error: unexpected-equals-sign-before-attribute-name (vue/no-parsing-error) at src\views\Home.vue:24:35:
  22 |         ]"
  23 |
> 24 |       :customHighlight = `(props) => ({
     |                                   ^
  25 |           highlight: {
  26 |               pre_tags: ['<mark>'],
  27 |               post_tags: ['</mark>'],

我从：https ://opensource.appbase.io/reactive-manual/vue/search-components/datasearch.html 得到这个片段

我有点卡住了，我在想他的模板文字的结构方式有问题吗？

谢谢！

4

1 回答 1

1

您从中复制的示例确实似乎是错误的。

在 JavaScript 中，反引号通常用于创建跨越多行的字符串。这使得它们对于编写 Vue 模板非常有用。

然而...

这个特殊的例子不是 JavaScript，而是 HTML。HTML 属性值需要用单引号或双引号括起来，而不是反引号。属性值可以跨越多行而不需要任何其他特殊处理。

因此，简而言之，只需将反引号替换为双引号 , "，一切都应该没问题。

于 2019-07-31T06:41:38.443 回答