[Vuejs]-Vue doesn't render content in my component's mustache templates ( {{}} )

by

-2👍

✅

I was able to get the App running! This is the working Code in case someone struggles with something similar! 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Bulletin Board</title>
  <meta charset="utf-8">
 <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> -->
 <!-- <meta name="apple-mobile-web-app-capable" content="yes">-->
 <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
    </div>
  </nav>
  <!-- main body of our application -->
  <div class="container" id="app">
    <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" placeholder="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" placeholder="Date" v-model="event.date">
          </div>
          <button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="list-group">
        <a href="#" class="list-group-item" v-for="event in events">
          <h4 class="list-group-item-heading">
                <i class="glyphicon glyphicon-bullhorn"></i>
                {{ event.name }}
            </h4>
          <h5>
                <i class="glyphicon glyphicon-calender" v-if="event.date"></i>
                {{ event.date }}
            </h5>

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

          <button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
        </a>
      </div>
    </div>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

And the app.js

new Vue({
  el: '#app',
  data: {
    event: {
      name: '',
      description: '',
      date: ''
    },
    events: []
  },
  mounted: function() {
    //alert('mounted')
    this.fetchEvents();
  },
  methods: {

   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.events = events;
    },
    //Adds an event to the existing events array
    addEvent: function() {
      if (this.event.name) {
        this.events.push(this.event);
        this.event = {
          name: '',
          description: '',
          date: ''
        };
      }
    },
    deleteEvent: function (index) {
      if (confirm('Are you sure you want to delete this event?')) {
        this.events.splice(index, 1);
      }
      // body...
    }
   }
});

Leave a comment