Question

我的app.js文件中的数据未被插值并显示在屏幕上。我尝试过较旧的v-repeat。可能是安装中缺少一些物品吗？任何帮助将不胜感激。

这是我的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>

这是我的js文件

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: '' };
    }
  }
}
});

感谢您的帮助。

Answer 1

所以，这里有一些问题。我把它们清理干净，让你看看。

添加el: "#app"属性以告知Vue安装Vue的位置。
将您的ready更改为mounted（您也可以使用created）。
将this.$set('events',events)更改为this.events = events。
添加了未引用的deleteEvent方法。
修正了v-on:click。

所以代码最终看起来像这样。

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')
    }
  }
});

模板

<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>

工作example。

为什么我的插值html在vue.js中没有正确显示？

1 个答案: