Search code examples
vue.jsvuejs2v-for

why v-for does not render all objects?

i'm trying to display search result that i'm getting it from api. but v-for does not render all objects?

this is my search-box:

enter image description here

as you see there is just one item, but every thing is right in vue dev tools:

enter image description here

and this is vue component (v-for):

enter image description here

and this is dom result:

enter image description here

whats wrong?

this is data: enter image description here

Solution

  • The value in result is an object and not an array. While it is possible to iterate over an object using v-for it seems unlikely that this is what you want here. Your object has the properties "0", "1", "2", "3" and "ok". All 5 of these will be included in the v-for, which is why you have 5 <li> elements being generated.

    Try changing your code to the following to get a better understanding of what's going on:

    <li v-for="(item, index) in result" :key="index">
    index: {{ index }}
    <br><br>
    item: {{ item }}
</li>

    I would suggest changing the format you use for result to put the results themselves inside an array, separate from the "ok" property. So your server might return something like {"ok": true, "results": [...]} and you could then pluck out the "results" property and throw away the rest.

    There is a further problem. In your original data you have a typo in several of your data entries. The property "link;" should be called "link". Note the extra ; at the end.