2

I have the following in my Vue project:

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

and I am getting the following errors:

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>'],

I am getting this snippet from: https://opensource.appbase.io/reactive-manual/vue/search-components/datasearch.html

I am a bit stuck and I am thinking that there is something wrong with the way he template literal is stuctured?

Thanks!

user1525612
  • 1,864
  • 1
  • 21
  • 33

1 Answers1

1

The example you've copied this from does appear to be wrong.

In JavaScript backticks are often used to create strings that span multiple lines. This makes them very useful for writing Vue templates.

However...

This particular example isn't in JavaScript, it's HTML. HTML attribute values need to be surrounded by single or double quotes, not backticks. Attribute values can span multiple lines without needing any other special treatment.

So, in short, just replace the backticks with double quotes, ", and everything should be fine.

skirtle
  • 27,868
  • 4
  • 42
  • 57