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中使用模板文字时发生错误

1 个答案: