CODEWITHSUNDEEP
htmlvue.js
BrandoN
BrandoN

Reputation: 313

Vue - Unexpected token '<'

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.

Upvotes: 0

Views: 1399

Answers (1)

Bergur
Bergur

Reputation: 4057

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: {}
})

Upvotes: 2

Related Questions