来自 API 响应的渲染列表

Question

我收到了大约 2,000 个与此类似的错误：

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

API 响应：

{"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，其中没有任何内容。哪来的2000？！

任何帮助表示赞赏。

Answer 1

似乎this.$http.get 没有将它作为 json 获取，而您只是通过一个字符串 v-foring，因为其中有 2206 个字符。

您的服务器是否发送了正确的 http 标头？

临时修复可能是：

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

不过，您确实应该考虑正确设置 http 标头。

Answer 2

试试这个：

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