Vue - Unexpected token '<'

Question

I have a really simple code. I'm trying to learn Vue by following this tutorial on youtube https://www.youtube.com/watch?v=4deVCNJq3qc

I am stuck at 31:30 with this code:

Vue.component('car-list', {
 template:
   <ul>
    <li v-for="car in cars">{{ car }}</li>
   </ul>
 })

for some reason it breaks the whole code and when i inspect the page on google chrome i get the error

Uncaught SyntaxError: Unexpected token '<'

screenshot of the error: https://ibb.co/CnzRFtZ

I am using Atom as my editor.

my whole code

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
  </head>
  <body>
    <div id="root">
      {{ carzName }}
      <br>
      <input v-model="newCar" @keyup.enter="addCar">
      <button @click="addCar">+ Add</button>

      <li v-for="car in cars">
        {{ car }}
      </li>
      <car-list :cars="cars" />
    </div>
  </body>
</html>

<script>

Vue.component('car-list', {
 template:
   <ul>
    <li v-for="car in cars">{{ car }}</li>
   </ul>
 })

  const app = new Vue({
    el: '#root',
    component: [
      'car-list'
    ],
    data: {
      cars: [
      'audi',
      'bmw',
      'mercu'
    ],
    newCar: ''
  },
  methods: {
    addCar: function() {
      this.cars.push(this.newCar)
      this.newCar = ''
    }
  },
  computed: {
    carzName: function() {
      if (this.newCar.length > 1) {
        return this.newCar + 'y'
      }
    }
  }
  })
</script>

Thanks to anyone who is willing to explain me where the problem is at.

Multi-line strings must be enclosed in back-ticks in JavaScript. Add a back-tick before <ul> and another after </ul>. — Turnip
– Turnip, Commented Sep 10, 2020 at 13:40
globally applying Vue.component makes component: ['car-list'], redundent — Lawrence Cherone
– Lawrence Cherone, Commented Sep 10, 2020 at 13:41

Bergur · Accepted Answer · 2020-09-10 14:11:58Z

2

Template needs to be string. Add backtick quotes around it.

Vue.component('car-list', {
  template: `
    <ul>
      <li v-for="car in cars">{{ car }}</li>
    </ul>`
})

Edit: To iterate more on @Lawrence Cherone comment there is no need to register the component globally with Vue.component if you are gonna register it within your vue app.

Version 1: Register globally

Vue.component('car-list', {
  template: `
    <ul>
      <li v-for="car in cars">{{ car }}</li>
    </ul>`
 })

and then remove component property from vue app

const app = new Vue({
  el: '#root',
  data: {}
})

Verison 2: Register within app

const carList = {
  template: `
    <ul>
      <li v-for="car in cars">{{ car }}</li>
    </ul>`
}

And then

const app = new Vue({
   el: '#root',
   component: {
      carList
   },
   data: {}
})

edited Sep 10, 2020 at 14:11

answered Sep 10, 2020 at 13:38

Bergur

4,07714 silver badges21 bronze badges

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

1 Comment

BrandoN Over a year ago

Yes, that did the trick. Didn't notice them in the video, they're tiny.

Collectives™ on Stack Overflow

Vue - Unexpected token '<'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related