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在几个页面中列出了线程，我想要的是每个{{ thread.name }}{{ thread.com }}看起来像no的列表，但我不清楚如何使用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>

从Vue-resource中的字符串中的数组中获取项目

1 个答案: