1

返されたデータは、ネストされたオブジェクトを持つオブジェクトの配列です。返されたデータのその部分にアクセスできないように見えるため、テンプレートの v-for ループで「イベント」を表示できません。

データは次のように返されます (Vue DevTools から):

list: Object
    user: "name"
    id: "id"
    events: Array[3]
        0: Object
           title: "event 1"
        1: Object
           title: "event 2"
        2: Object
           title: "event 3"

Vue-resource (CDN 経由) を使用して、テンプレート内のイベントのみを表示するにはどうすればよいですか?

テンプレート：

<template id="events-template">
  <div v-for="events in list">
    @{{events.title}}
  </div>    
</template>

私のアプリケーション：

Vue.component('events', {
template: '#events-template',

data: function() {
    return {
        list: []
    }
},

created: function() {
    this.fetchEventsList();
},

methods: {
    fetchEventsList: function() {
        this.$http.get('events', function(events) {
            this.list = events;
        }).bind(this);
    }
}

});
4

1 に答える 1

3

ループ内の false プロパティにアクセスしようとしているようです。

変数にリスト/配列 (オブジェクト) が含まれてlistいません。list反復する配列は、オブジェクトの events 属性です。それでlist.events

さらに、ループ内の「現在の」アイテム (イベント) のプロパティ (タイトル) にアクセスします。次に、ホール配列にアクセスする必要はなく、現在の要素にアクセスする必要があります。event.title

テンプレート ブロックを置き換えます。

<template id="events-template">
    <div v-for="event in list.events">
        @{{event.title}}
    </div>    
</template>
于 2016-01-31T19:46:58.447 に答える