3

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?

3 Answers 3

13

You have to write backticks `, not simple quotes '

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

5
  • 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. Nov 23, 2016 at 10:13
  • 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.
    – craig_h
    Nov 23, 2016 at 10:16
  • 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. Nov 23, 2016 at 10:19
  • 1
    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
    Nov 23, 2016 at 10:28
  • I've updated my answer to show you where I think the problem with your string template is.
    – craig_h
    Nov 23, 2016 at 10:52
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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.