Javascript Uncaught SyntaxError: Unexpected Identifier (vue.js)

Question

I'm having a frustrating time trying to get this to work, Chrome keeps displaying an Uncaught Syntax error, but being a beginner to Vue, I have no idea where to look. Im at the part of the tutorial where it says Adding the listing area. Also here is a link to the tutorial as well. Any help or pointers would be appreciated. Thank you!

new Vue({

  el: '#events',



  data: {
    event: {
      name: "",
      description: "",
      date: ""
    },
    events: []

    ready: function() {
      // When the application loads, we want to call the method that initializes
      // some data
      this.fetchEvents();
    },
    fetchEvents: function() {

      var events = [{

          id: 1,
          name: "TIFF",
          description: "Toronto International Film Festival",
          date: "2015-09-10"
        },
        {

          id: 2,
          name: "The Martian Premiere",
          description: "The Martian Comes to Theatres.",
          date: "2015-10-02"
        },
        {

          id: 3
          name: "SXSW",
          description: "Music, film and interactive festival in Austin, TX.",
          date: "2016-03-11"
        }




      ];

      this.$set("events", events);
    },

    addEvent: function() {

      if (this.event.name) {

        this.events.push(this.event);
        this.event = {
          name: "",
          description: "",
          date: ""
        };
      }
    }
  }
})

<!doctype html>

<head>
  <meta charset="utf-8">
  <title>Vue</title>

  <!---CSS-->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>

  <!--Nav bar-->
  <nav class="navbar navbar-default">
    <div class="container fluid">
      <a class="navbar-brand"><i class= "glyphicon glyphicon-bullhorn"></i> Vue Events Bulletin Board</a>
    </div>
  </nav>

  <!--main body of our application-->
  <div class="container" id="events">

    <!--add an event form-->
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3> Add An Event</h3>
        </div>

        <div class="panel-body">


          <div class="form-group">
            <input class="form-control" placeholoder="Event Name" v-model="event.name">
          </div>

          <div class="form-group">
            <textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
          </div>

          <div class="form-group">
            <input type="date" class="form-control" placeholoder="Date" v-model="event.date">
          </div>





          <button class="btn btn-primary" v-on="click: addEvent">Submit</button>
        </div>


        <div class="list-group" <a href="#" class="list-group-item" v-repeat="event in events">
          <h4 class="list-group-item-heading">
            <i class="glyphicon glyphicon-bullhorn"></i>

          </h4>


          <h5>
            <i class="glyphicon glyphicon-calender" v-if="event.date"></i>

          </h5>

          <p class="list-group-item-text" v-if="event.description"> </p>

          <button class="btn btn-xs btn-danger" v-on="click: deleteEvent($index)">Delete</button>

        </div>



        <!--show the events-->
        <div class="col-sm-6">
          <div class="list-group">

          </div>

        </div>
      </div>

      <!--JS-->
      <script src="node_modules/vue/dist/vue.js"></script>
      <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
      <script src="app1.js">
        < /script < /
        body > <
          /html>

You're missing a comma after id: 3 in events.

Andrew Li
– Andrew Li

2017-05-14 00:41:23 +00:00
Commented May 14, 2017 at 0:41 — Andrew Li
– Andrew Li, Commented May 14, 2017 at 0:41

Lennholm · Accepted Answer · 2018-09-20 10:44:56Z

9

You're missing a comma in one of your object declarations

   {

      id: 3 // <- missing comma here
      name: "SXSW",
      description: "Music, film and interactive festival in Austin, TX.",
      date: "2016-03-11"
    }

It's plain Javascript, it has nothing to do with Vue

edited Sep 20, 2018 at 10:44

answered May 14, 2017 at 0:48

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Javascript Uncaught SyntaxError: Unexpected Identifier (vue.js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related