Invalid or unexpected token in my Vuejs javascript file

Question

In my vue component js code, I received this error:

Uncaught SyntaxError: Invalid or unexpected token

This is my code:

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

What is wrong with this code?

jsmean · Accepted Answer · 2017-06-15 21:03:58Z

13

You have to write backticks `, not simple quotes '

answered Jun 15, 2017 at 21:03

jsmean

2393 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

craig_h · Accepted Answer · 2016-11-23 10:52:04Z

0

Try to avoid using a string as your template, instead use the HTML 5 template tag and reference it:

<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>

Then you can reference it by id:

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

If you want to use a string then check the ends of your lines and make sure there is no whitespace after the backslash, I think your error lies on these two lines:

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

Both have whitespace at the end that you need to remove.

edited Nov 23, 2016 at 10:52

answered Nov 23, 2016 at 10:05

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

5 Comments

Belmin Bedak Over a year ago

Or if he want to go with strings, there are dedicated template strings as part of ES2015.But I agree with you - about using HTML5 template tags.

craig_h Over a year ago

Yes, although they would need to be compiled and even babel doesn't include the template literals transform by default, so if you're doing that you might as well use a single page component, which is much cleaner.

RichardMiracles Over a year ago

Mmm but this is a component, I don´t use html in this view. In anywhere html file I want use the tags <pickpoint-info></pickpoint-info> and renderized the component.

craig_h Over a year ago

You can just seperate them out into a views file and include them in your HTML. The problem with using strings as complex templates is exactly what you are experiencing, trying to find where you have missed a concatenation or escape character. You should also look at single file components they make your life a lot easier.

craig_h Over a year ago

I've updated my answer to show you where I think the problem with your string template is.

Imix · Accepted Answer · 2020-03-15 16:47:25Z

0

For writing backtick, you can check this link examples on different keyboards

In my case (Using qwertz keyboard) it is "Alt Gr" + "7" (maybe you need to press it twice).

answered Mar 15, 2020 at 16:47

Imix

12 bronze badges

Collectives™ on Stack Overflow

Invalid or unexpected token in my Vuejs javascript file

3 Answers 3

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Related