Vue-resourceの文字列内の配列から項目を取得

Question

私はVue-Resourceの使い方を学んでいます。私は作業しているapiで壁に当たっています。私はv-for: thread in threadsを使用してスレッドのリストを設定しようとしています。ここで

は、私が働いているかのサンプルです：

[{ 
"threads": [{ 
    "no": 1, 
    "name": "John", 
    "com": "comment" 
},{ 
    "no": 2, 
    "name": "Jim", 
    "com": "comment" 
},{ 
    "no": 3, 
    "name": "Jane", 
    "com": "comment" 
}], 
"page": 0 
}, { 
"threads": [{ 
    "no": 4, 
    "name": "Tom", 
    "com": "comment" 
},{ 
    "no": 5, 
    "name": "Mark", 
    "com": "comment" 
}], 
"page": 1 
}] 

APIは、数ページにわたって記載されているスレッドを持って、私がしたいことは、各noため{{ thread.name }}{{ thread.com }}のようになりますリストですが、私はvue-resourceを使ってその情報を取得する方法について完全にはっきりしていません。現在使用している場合

<li v-for="thread in threads"> {{ thread.name }}{{ thread.com }} </li> 

私はちょうど空の項目のリストを取得します。

Answer 1

まず、名前の値を二重引用符で囲み、JSONをpagesという変数に保存しました。

var pages=[ 
    { 
    "threads": [ 
     { 
     "no": 1, 
     "name": "John", 
     "com": "comment" 
     }, 
     { 
     "no": 2, 
     "name": "Jim", 
     "com": "comment" 
     }, 
     { 
     "no": 3, 
     "name": "Jane", 
     "com": "comment" 
     } 
    ], 
    "page": 0 
    }, 
    { 
    "threads": [ 
     { 
     "no": 4, 
     "name": "Tom", 
     "com": "comment" 
     },{ 
     "no": 5, 
     "name": "Mark", 
     "com": "comment" 
     } 
    ], 
    "page": 1 
    } 
] 

次に、あなたのHTMLは、私はAPIを取得していますこのようにそれを設定するにはどうすればよいこの

<div v-for:"page in pages"> 
    <div class="page" v-for"thread in page.threads"> 
    <div>{{thread.name}}{{thread.com}}</div> 
    </div> 
</div>