从 Vue 资源中的字符串中的数组中获取项目

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 可能看起来像这样

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