我的 Vuejs javascript 文件中的令牌无效或意外

Question

在我的 vue 组件 js 代码中，我收到了这个错误：

Uncaught SyntaxError: Invalid or unexpected token

这是我的代码：

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

这段代码有什么问题？

Answer 1

尽量避免使用字符串作为模板，而是使用 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，您需要将其删除。

Answer 2

你必须写反引号`，而不是简单的引号'

Answer 3

对于写反引号，你可以检查这个link examples on different keyboards

在我的例子中（使用 qwertz 键盘）它是 "Alt Gr" + “7”（也许你需要按两次）。

我的 Vuejs javascript 文件中的令牌无效或意外

Invalid or unexpected token in my Vuejs javascript file

javascript

vue.js

vue-component