Rendering list from API response

Question

I'm getting ~2,000 errors similar to this:

[Vue warn]: Duplicate value found in v-for="task in tasks": "}". Use track-by="$index" if you are expecting duplicate values.

API Response:

{"data":[{"id":1,"name":"Molestiae aut voluptatum omnis ratione aut.","body":"Laudantium itaque qui qui eius temporibus doloremque officia. Facilis quam aut sunt ipsum eum repellendus nam. Qui doloremque ipsam at sapiente voluptate."},
{"id":2,"name":"Nihil sed et ut sapiente ut iusto molestiae.","body":"Ut est doloremque accusantium dolore. Amet dolorem quia omnis quia eos et id omnis. Sunt facilis provident dolorem nisi voluptatibus omnis. Vel accusamus in nisi modi."},
{"id":3,"name":"Et et quis natus temporibus dolores quia.","body":"Vitae vitae adipisci dignissimos doloribus explicabo recusandae et. Officiis qui dicta nihil voluptatum aliquid odio. Sit sit doloremque eos minus neque cupiditate eaque qui. Rem nihil nesciunt tenetur quas aut. Sit eligendi unde doloribus consequuntur eius."},
{"id":4,"name":"Rem eveniet officiis voluptatem et.","body":"Vitae qui qui totam vel ex quae adipisci. Iure porro qui quia iste culpa quisquam. Hic voluptatum qui tenetur temporibus soluta voluptates corporis."},
{"id":5,"name":"Vel dolor nulla quibusdam animi molestias quis voluptatem.","body":"Dolorem deserunt velit porro autem. Beatae sit est quae eum suscipit. Velit tempora aperiam illum autem unde esse mollitia libero. Et consequatur perferendis voluptatem harum necessitatibus delectus inventore."},
{"id":6,"name":"Maiores in accusantium aliquam doloremque.","body":"Dolores adipisci porro sunt velit dolores omnis omnis. Reiciendis a maiores nesciunt qui vel necessitatibus nisi. Facere est iste distinctio ipsam labore pariatur. Modi unde consequuntur veniam alias minima. Dignissimos voluptatem iste quas quidem et."},
{"id":7,"name":"Ea et nesciunt quia asperiores sed quia dicta.","body":"Facilis eum magnam inventore perferendis dignissimos consequatur. Dolorum est illum reiciendis sunt at et labore."},
{"id":8,"name":"Nemo distinctio harum autem et velit voluptates.","body":"Impedit ea tenetur sapiente sapiente ipsa maiores nam omnis. Eos nisi dignissimos pariatur nam."},
{"id":9,"name":"Omnis quis et quia est veniam aut sunt porro.","body":"Eos rem itaque enim eum. Suscipit eaque harum consequatur quaerat. Itaque unde exercitationem saepe harum. Fugit ducimus et et ex."}]}

Tasks component:

<template>
  <ul>
    <li v-for="task in tasks">
      {{ task.name }}
    </li>
  </ul>
</template>

  <script>
    export default {
      data () {
        return {
          tasks: []
        }
      },

  ready () {
    this.$http.get('/api/tasks').then((response) => {
      this.tasks = response.data
    }, (response) => {
      // error
    })
  }
}

When I try adding track-by="$index" to v-for it creates 2,000 <li>s with nothing inside them. Where is it getting 2,000 from?!

Any help appreciated.

0.9.3. I'm also using this with the vue webpack boilerplate - vuejs-templates.github.io/webpack/proxy.html. Which seems to be my problem. — Chris
– Chris, Commented Jul 15, 2016 at 18:55

Bill Criswell · Accepted Answer · 2016-07-17 04:11:17Z

1

It seems like this.$http.get isn't getting it as json and you're just v-foring through a string since there's 2206 characters in it.

Is your server sending the right http headers?

A temporary fix could be:

this.tasks = JSON.parse(response.data.data)

Though, you really should look into getting the http headers set properly.

answered Jul 17, 2016 at 4:11

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Yep, I'm using vue webpack boilerplate and it has a proxy option (as my api is separate to my front-end). This seemed to be returning the data as a string instead of JSON (after getting JSON from the API). I've now gotten around this by setting a Access-Control-Allow-Origin: '*' header on my api web server.

Helder Lucas Over a year ago

use this package: github.com/barryvdh/laravel-cors. This will help you with the Cross-Origin Resource Sharing. Probably you have two different domains and for security reasons you can't make request to another domain unless the other allows u to

Helder Lucas · Accepted Answer · 2016-07-16 20:19:53Z

0

Try this:

ready () {
    this.$http.get('/api/tasks').then((response) => {
       this.tasks = response.data.data
    }, (response) => {
      // error
    })
}

answered Jul 16, 2016 at 20:19

Helder Lucas

3,3532 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Rendering list from API response

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related