Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I'm learning how to use Vue-Resource and I've hit a wall with the api I'm working with. I'm trying to set up a list of threads using v-for: thread in threads.

Here's a sample of what I'm working with:

[{
"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
}]

The api has threads listed across a few pages, what I want is a list that looks something like {{ thread.name }}{{ thread.com }} for each no but I'm not entirely clear on how to grab that information using vue-resource. Currently if I use

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

I just get a list of empty items.

share|improve this question

First off I added double quotes around the name values, and saved your JSON to a variable called 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
  }
]

Then your HTML could look something like this

<div v-for:"page in pages">
  <div class="page" v-for"thread in page.threads">
    <div>{{thread.name}}{{thread.com}}</div>
  </div>
</div>
share|improve this answer
    
How do I set it up this way when I'm getting an API? Here's my js: pastebin.com/6GxR8BdJ – Mr.Richway Aug 26 at 14:38
    
It depends on how your API.json works? – qw3n Aug 26 at 16:16
    
My API.json works like the example posted in my question. – Mr.Richway Aug 26 at 19:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.