список Rendering от ответа API

Question

Я получаю ~ 2000 ошибок, подобные этим:

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

Задачи компонента:

<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 
    }) 
    } 
} 

Когда я пытаюсь добавить track-by="$index" в v-for, он создает 2 000 <li> s, и ничего не внутри. Откуда у него 2 000?

Любая помощь приветствуется.

Answer 1

Попробуйте это:

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

Answer 2

Похоже, this.$http.get не получает его, как JSON и вы просто v-for ING через строку, так как есть 2206 символов в нем.

Ваш сервер отправляет правильные заголовки http?

временное исправление может быть:

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

Хотя, вы действительно должны смотреть на получение HTTP-заголовки, установленные должным образом.