Неверный или неожиданный токен в моем файле javascript Vuejs

В моем js-коде компонента vue я получил эту ошибку:

Uncaught SyntaxError: недопустимый или неожиданный токен

Это мой код:

Vue.component('pickpoint-info', {

    template : '<table>\ // in this line I get the error
                    <tbody>\
                        <tr v-for="item in items" v-on:click="selectPickPoint(this)">\
                            <td width="50" align="center"><input name="pickpointid" type="radio" value="{{ item.customer_id }}"></td>\
                            <td width="300">\
                                <b>{{ item.name }}</b> <i style="font-size:9px;">#{{ item.customer_id }}</i>\
                                <br>\
                                {{ item.address }}\ 
                                <br>\ 
                                {{ item.postal_code }}\
                                <a href="{{ item.map_link }}" target="_blank" style="font-size:10px;">(ver en el mapa</a>)\
                            </td>\
                        </tr>\
                    </tbody>\
                </table>\
    ',

Что не так с этим кодом?


javascript vue.js vue-component
person Antonio Morales    schedule 23.11.2016    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Вы должны использовать обратные кавычки `, а не простые кавычки '

person jsmean    schedule 15.06.2017

arrow_upward
0
arrow_downward

Старайтесь избегать использования строки в качестве шаблона, вместо этого используйте тег шаблона HTML 5 и ссылайтесь на него:

<template id="my-template">
  <table> in this line I get the error
    <tbody>
      <tr v-for="item in items" v-on:click="selectPickPoint(this)">
        <td width="50" align="center">
          <input name="pickpointid" type="radio" value="{{ item.customer_id }}">
        </td>
        <td width="300">
          <b>{{ item.name }}</b> <i style="font-size:9px;">#{{ item.customer_id }}</i>
          <br> {{ item.address }}
          <br> {{ item.postal_code }}
          <a href="{{ item.map_link }}" target="_blank" style="font-size:10px;">(ver en el mapa</a>)
        </td>
      </tr>
    </tbody>
  </table>
</template>

Затем вы можете ссылаться на него с помощью id:

Vue.component('pickpoint-info', {
  template: "#my-template"
});

Если вы хотите использовать строку, проверьте концы ваших строк и убедитесь, что после обратной косой черты нет пробелов, я думаю, ваша ошибка заключается в этих двух строках:

{{ item.address }}\ 
  <br>\

У обоих на конце есть whitespace, который нужно удалить.

person craig_h    schedule 23.11.2016
comment
Или, если он хочет использовать строки, в рамках ES2015 есть специальные строки шаблонов, но я согласен с вами - об использовании тегов HTML5 template. - person Belmin Bedak; 23.11.2016
comment
Да, хотя они должны быть скомпилированы, и даже babel не включает template literals преобразование по умолчанию, поэтому, если вы это делаете, вы также можете использовать одностраничный компонент, который намного чище. - person craig_h; 23.11.2016
comment
Ммм, но это компонент, я не использую html в этом представлении. В любом HTML-файле я хочу использовать теги ‹pickpoint-info› ‹/pickpoint-info› и визуализировать компонент. - person Antonio Morales; 23.11.2016
comment
Вы можете просто разделить их в файл представлений и включить их в свой HTML. Проблема с использованием строк в качестве сложных шаблонов - это именно то, что вы испытываете, пытаясь найти, где вы пропустили конкатенацию или escape-символ. Вам также следует обратить внимание на отдельные файловые компоненты, они очень сильно улучшают вашу жизнь. Полегче. - person craig_h; 23.11.2016
comment
Я обновил свой ответ, чтобы показать вам, в чем, по моему мнению, проблема с вашим строковым шаблоном. - person craig_h; 23.11.2016

arrow_upward
0
arrow_downward

Для написания обратной кавычки вы можете проверить эту ссылку Примеры на разных клавиатурах

В моем случае (при использовании клавиатуры qwertz) это «Alt Gr» + «7» (возможно, вам нужно нажать дважды).

person Imix    schedule 15.03.2020