Ошибки при использовании шаблонных литералов во Vue

В моем проекте 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.

Я немного застрял и думаю, что что-то не так с тем, как он структурирован шаблонным литералом?

Спасибо!


vue.js template-literals reactivesearch
person user1525612    schedule 30.07.2019    source источник
comment
Можете ли вы показать полное объявление компонента, как в примере, с которым вы связались?   -  person Stephane    schedule 31.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Пример, из которого вы это скопировали, кажется неправильным.

В JavaScript обратные кавычки часто используются для создания строк, охватывающих несколько строк. Это делает их очень полезными для написания шаблонов Vue.

Тем не мение...

Этот конкретный пример не в JavaScript, это HTML. Значения атрибутов HTML необходимо заключать в одинарные или двойные кавычки, а не в обратные кавычки. Значения атрибутов могут охватывать несколько строк без какой-либо другой специальной обработки.

Короче говоря, просто замените обратные кавычки двойными кавычками, ", и все будет в порядке.

person skirtle    schedule 31.07.2019
comment
Спасибо, Skirtle, я попробовал, и ошибок не было. Единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что мой ‹mark› ‹/mark› HTML экранирован и не отображается как HTML. - person user1525612; 31.07.2019
comment
Неважно, мне пришлось использовать v-html вместо фигурных скобок. Благодарность! - person user1525612; 01.08.2019