I am using vue.js and getting this error "Uncaught SyntaxError: let is disallowed as a lexically bound name". When I debug it shows a blank screen and this error in the console.

I have Googled but nothing helpful was found.

Here is my Vue code:

    let Task = {
      props: ['task'],
      template: `
       <div>
        <div class="tasks">
          {{ task.body }}

        </div>
       </div>
    `

    },

     let Tasks = {
       components:{
         'task': Task
       },

       data: {
         return {
           tasks: [
            {id: 1, body: 'Task One', done: false }
           ],
         }
       },

       template: `
        <div>
       <task></task>
           <form action="">
             form
           </form>
      </div>
      `
     },

      let app = new Vue({
        el:'#app',
        components: {
         'tasks': Tasks
         'task': Task
       }
     })

I am using vue.js and getting this error "Uncaught SyntaxError: let is disallowed as a lexically bound name". When I debug it shows a blank screen and this error in the console.

I have Googled but nothing helpful was found.

Here is my Vue code:

    let Task = {
      props: ['task'],
      template: `
       <div>
        <div class="tasks">
          {{ task.body }}

        </div>
       </div>
    `

    },

     let Tasks = {
       components:{
         'task': Task
       },

       data: {
         return {
           tasks: [
            {id: 1, body: 'Task One', done: false }
           ],
         }
       },

       template: `
        <div>
       <task></task>
           <form action="">
             form
           </form>
      </div>
      `
     },

      let app = new Vue({
        el:'#app',
        components: {
         'tasks': Tasks
         'task': Task
       }
     })

• javascript
• vue.js
• vuejs2

2 Answers 2

If you are separating your declarations with commas, you should not repeat let. either remove let from each declaration, or use semi-colons instead.

Example:

let a = {}, b = 5, c = function(){}; // OK
let a = {}; let b = 5; // OK
let a = {}, let b = 5; //Not OK -- error

let Task = {
  props: ['task'],
  template: `
   <div>
    <div class="tasks">
      {{ task.body }}

    </div>
   </div>
`

};

 let Tasks = {
   components:{
     'task': Task
   },

   data: {
     return {
       tasks: [
        {id: 1, body: 'Task One', done: false }
       ],
     }
   },

   template: `
    <div>
   <task></task>
       <form action="">
         form
       </form>
  </div>
  `
 };

  let app = new Vue({
    el:'#app',
    components: {
     'tasks': Tasks
     'task': Task
   }
 })

You wrote some commas that should have been semicolons