在 Vue 中使用模板字面量时的错误

Question

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

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

谢谢！

Answer 1

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

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

然而...

此特定示例不在 JavaScript 中，它在 HTML 中。 HTML 属性值需要用单引号或双引号括起来，而不是反引号。属性值可以跨越多行而不需要任何其他特殊处理。

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

在 Vue 中使用模板字面量时的错误

Errors when using template literals in Vue

vue.js

template-literals

reactivesearch