why doesn't my interpolated html display properly in vue.js?

Question

The data in my app.js file is not being interpolated and displayed on the screen. I tried the older v-repeat. Could it be some missing items in the installation? Any help would be appreciated.

Here is my html

<!-- show the events -->
<div class="col-sm-6">
  <div class="list-group">
      <a href="#" class="list-group-item" v-for="event in events">
        <!-- <h1>{{text}}</h1> -->
        <h4 class="list-group-item-heading">
          <i class="glyphicon glyphicon-bullhorn"></i> 
          {{ event.name }}
        </h4>

        <h5>
          <i class="glyphicon glyphicon-calendar" 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>

And here is my js file

new Vue({

data: {
    text: 'hello world',
  event: { name: '', description: '', date: '' },
  events: []
},

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

// Methods we want to use in our application are registered here
methods: {

  // We dedicate a method to retrieving and setting some data
  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'
      }
    ];
    // $set is a convenience method provided by Vue that is similar to pushing
    // data onto an array
    this.$set('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: '' };
    }
  }
}
});

Thanks for any help.

I'm using [email protected] and [email protected]. is that what you're asking? — jdag
– jdag, Commented Jun 5, 2017 at 22:14
I suggest you take a spin through the v2 docs. There is no ready in v2. You probably wanted created or mounted. — Bert
– Bert, Commented Jun 5, 2017 at 22:15
Also this.$set('events', events) should just be this.events = events. — Bert
– Bert, Commented Jun 5, 2017 at 22:17
oh good to know about these fundamental differences. ill take a look through and play with the code a bit. thanks — jdag
– jdag, Commented Jun 5, 2017 at 22:21

Bert · Accepted Answer · 2017-06-05 22:28:28Z

1

So, there are a few issues here. I've cleaned them up for you to look over.

Added the el: "#app" property to tell Vue where to mount your Vue.
Changed your ready to mounted (you could also use created).
Changed this.$set('events',events) to this.events = events.
Added the unreferenced deleteEvent method.
Fixed the click handler syntax for v-on:click.

So the code ends up looking like this.

new Vue({
  el: "#app",
  data: {
    text: 'hello world',
    event: { name: '', description: '', date: '' },
    events: []
  },
  mounted: function() {
      this.fetchEvents();
  },
  // Methods we want to use in our application are registered here
  methods: {

    // We dedicate a method to retrieving and setting some data
    fetchEvents: function() {
      var events = [...];
      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(){
      alert('delete this one')
    }
  }
});

Template

<div id="app">
  <!-- show the events -->
  <div class="col-sm-6">
    <div class="list-group">
      <a href="#" class="list-group-item" v-for="event in events">
        <!-- <h1>{{text}}</h1> -->
        <h4 class="list-group-item-heading">
          <i class="glyphicon glyphicon-bullhorn"></i> 
          {{ event.name }}
        </h4>

        <h5>
          <i class="glyphicon glyphicon-calendar" 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(event)">Delete</button>
      </a>
    </div>
  </div>
</div>

Working example.

edited Jun 5, 2017 at 22:28

answered Jun 5, 2017 at 22:21

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

4 Comments

jdag Over a year ago

Thank you Bert. That worked. A follow up question I have is ... so i have a form above the code you posted, and originally I wrapped everything - the form, and the html above - in a div container with the id="app". when i move the id back to the container div, nothing shows up on the screen. no errors, but the page doesn't render the content. When i move the id="app" back to where you had it, it displays. Any thoughts on why the location of el causes content to render or not render?

Bert Over a year ago

@JackDagley I would need to see the layout to be able to answer. If you want to throw it in the pen or a fiddle I'll take a look.

jdag Over a year ago

Cool, thanks. Here is the pen, in which i added the id="app" to the container div instead of the events list - codepen.io/jdagley77/pen/vZOmBw

Bert Over a year ago

@JackDagley Sorry for the delayed response. The reason nothing displays when you move the id="app" to the container is because of a syntax error on your Submit button, <button class="btn btn-primary" v-on:"click: addEvent">Submit</button>. That line should be this: <button class="btn btn-primary" v-on:click="addEvent">Submit</button>. Then everything will work fine.

Collectives™ on Stack Overflow

why doesn't my interpolated html display properly in vue.js?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related