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>个内容。从哪里获得2000！？

任何帮助表示感谢。

Answer 1

似乎v-for并未将其设为json而您只是this.tasks = JSON.parse(response.data.data)通过字符串，因为其中包含2206个字符。

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

临时修复可能是：

List<Geometry> list = getList();
var point = new Point(x,y);

list.Any(y => y.Bounds.Contains(point) && y.FillContains(point));

尽管如此，你真的应该考虑正确设置http标头。

Answer 2

试试这个：

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

从API响应中呈现列表

2 个答案: